Attachment 471931 Details for Bug 133180 – simplified touch event accuracy test

simplified touch event accuracy test

touch-event-accuracy-test.html (text/html), 1.18 KB, created by Byungseon(Sun) Shin on 2024-07-22 14:29:48 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Byungseon(Sun) Shin

Created: 2024-07-22 14:29:48 PDT

Size: 1.18 KB

patch

obsolete

>
><!DOCTYPE html>
><html lang="en">
><head>
><meta charset="UTF-8">
><meta name="viewport" content="width=device-width, initial-scale=1.0">
><title>Touch Event Accuracy Test</title>
><style>
>  body {
>    touch-action: none; /* Prevent default touch behaviors like scrolling */
>    user-select: none; /* Prevent text selection */
>  }
>  #touchArea {
>    width: 100vw;
>    height: 100vh;
>    background-color: lightgrey;
>    display: flex;
>    justify-content: center;
>    align-items: center;
>    font-size: 24px;
>  }
></style>
></head>
><body>
><div id="touchArea">Touch me!</div>
><script>
>  const touchArea = document.getElementById('touchArea');
>
>  touchArea.addEventListener('touchstart', (e) => {
>    const touch = e.touches[0];
>    touchArea.innerHTML = `Touch Start: (${touch.clientX.toFixed(2)}, ${touch.clientY.toFixed(2)})`;
>    e.preventDefault();
>  });
>
>  touchArea.addEventListener('touchmove', (e) => {
>    const touch = e.touches[0];
>    touchArea.innerHTML = `Touch Move: (${touch.clientX.toFixed(2)}, ${touch.clientY.toFixed(2)})`;
>    e.preventDefault();
>  });
>
>  touchArea.addEventListener('touchend', (e) => {
>    touchArea.innerHTML = 'Touch me!';
>    e.preventDefault();
>  });
></script>
></body>
></html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Event Accuracy Test</title>
<style>
  body {
    touch-action: none; /* Prevent default touch behaviors like scrolling */
    user-select: none; /* Prevent text selection */
  }
  #touchArea {
    width: 100vw;
    height: 100vh;
    background-color: lightgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>
</head>
<body>
<div id="touchArea">Touch me!</div>
<script>
  const touchArea = document.getElementById('touchArea');

  touchArea.addEventListener('touchstart', (e) => {
    const touch = e.touches[0];
    touchArea.innerHTML = `Touch Start: (${touch.clientX.toFixed(2)}, ${touch.clientY.toFixed(2)})`;
    e.preventDefault();
  });

  touchArea.addEventListener('touchmove', (e) => {
    const touch = e.touches[0];
    touchArea.innerHTML = `Touch Move: (${touch.clientX.toFixed(2)}, ${touch.clientY.toFixed(2)})`;
    e.preventDefault();
  });

  touchArea.addEventListener('touchend', (e) => {
    touchArea.innerHTML = 'Touch me!';
    e.preventDefault();
  });
</script>
</body>
</html>

Actions: View

Attachments on bug 133180: 281273 | 281277 | 471720 | 471721 | 471931 | 471932