【JavaScript】事件监听：触摸事件

a辰龙a

于 2024-01-24 18:53:27 发布

阅读量1.6k

点赞数 31

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47040861/article/details/135829232

版权

一、touchstart：当手指触摸屏幕时触发。

二、touchmove：当手指在屏幕上滑动时触发。

三、touchend：当手指离开屏幕时触发。

四、touchcancel：当触摸事件被取消时触发，例如突然有来电等中断触摸的情况。

五、touchenter：当手指触摸到元素边界时触发。

六、touchleave：当手指离开元素边界时触发。

JavaScript触摸事件是通过浏览器提供的Touch API来实现的。当用户在触摸屏设备上进行交互时，浏览器会捕捉到触摸事件，并将其传递给相应的JavaScript事件处理器。

需要注意的是，触摸事件在不同的设备和浏览器上可能有差异，因此在使用触摸事件时应该进行兼容性测试，并根据需要进行适当的兼容性处理。此外，触摸事件通常与其他事件（如点击事件、滚动事件等）结合使用，以实现更复杂的交互效果。

一、touchstart：当手指触摸屏幕时触发。

touchstart事件在用户触摸屏幕时触发，可以用于实现各种触摸交互效果。以下是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>触摸事件示例</title>
  <style>
    #touchDiv {
      width: 200px;
      height: 200px;
      background-color: green;
      color: white;
      text-align: center;
      line-height: 200px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="touchDiv">点击触摸</div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const touchDiv = document.getElementById('touchDiv');

      touchDiv.addEventListener('touchstart', function(event) {
        // 当用户触摸元素时，更改其背景颜色和文本内容
        touchDiv.style.backgroundColor = 'red';
        touchDiv.textContent = '已触摸';
      });
    });
  </script>
</body>
</html>

在这个示例中，我们有一个HTML文档，其中包含一个id为touchDiv的<div>元素。CSS样式定义了元素的外观。JavaScript代码直接嵌入在HTML文件中，在DOMContentLoaded事件中添加了一个touchstart事件监听器。当用户触摸touchDiv元素时，触发事件处理函数，将元素的背景颜色更改为红色，并更新文本内容为"已触摸"。

将HTML代码保存为HTML文件（例如index.html），然后在Web浏览器中打开该文件。您应该看到一个具有绿色背景的"点击触摸"元素。当您触摸它时，元素的外观将根据事件处理函数中指定的更改而改变。

二、touchmove：当手指在屏幕上滑动时触发。

当触摸设备上的手指在屏幕上移动时，会触发touchmove事件。这个事件常用于实现触摸滑动、拖拽等交互效果。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>触摸移动事件示例</title>
  <style>
    #touchDiv {
      width: 200px;
      height: 200px;
      background-color: green;
      color: white;
      text-align: center;
      line-height: 200px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="touchDiv">触摸并移动</div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const touchDiv = document.getElementById('touchDiv');

      touchDiv.addEventListener('touchmove', function(event) {
        // 阻止默认的滚动行为
        event.preventDefault();

        // 获取触摸点的坐标
        const touch = event.touches[0];
        const x = touch.clientX;
        const y = touch.clientY;

        // 将触摸点的坐标显示在元素上
        touchDiv.textContent = `坐标：(${x}, ${y})`;
      });
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个带有id为touchDiv的<div>元素，通过CSS样式设置了其外观。在JavaScript中，我们在DOMContentLoaded事件中添加了一个touchmove事件的监听器。

当用户在touchDiv元素上触摸并移动手指时，touchmove事件被触发。事件处理函数首先使用event.preventDefault()阻止默认的滚动行为。然后，通过event.touches属性获取第一个触摸点的坐标。将x和y坐标提取出来，并将其显示在touchDiv元素的文本内容中。

三、touchend：当手指离开屏幕时触发。

touchend事件在触摸设备上的手指离开屏幕时触发。它通常用于捕捉用户完成触摸操作的时机，例如触摸按钮、滑动结束等。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>触摸结束事件示例</title>
  <style>
    #touchDiv {
      width: 200px;
      height: 200px;
      background-color: green;
      color: white;
      text-align: center;
      line-height: 200px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="touchDiv">触摸并松开</div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const touchDiv = document.getElementById('touchDiv');

      touchDiv.addEventListener('touchend', function(event) {
        // 更改元素的背景颜色
        touchDiv.style.backgroundColor = 'red';
        // 修改文本内容
        touchDiv.textContent = '触摸结束';
      });
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个带有id为touchDiv的<div>元素，通过CSS样式设置了其外观。在JavaScript中，我们在DOMContentLoaded事件中添加了一个touchend事件的监听器。

当用户在touchDiv元素上触摸并松开手指时，touchend事件被触发。事件处理函数中，我们将touchDiv元素的背景颜色改为红色，并将文本内容修改为"触摸结束"。

四、touchcancel：当触摸事件被取消时触发，例如突然有来电等中断触摸的情况。

touchcancel事件在触摸设备上触发的情况下，触摸被取消时会被触发。它通常用于处理触摸操作被中断或取消的情况，例如触摸事件发生期间设备发生旋转、触摸设备被其他操作所占用等情况。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>触摸取消事件示例</title>
  <style>
    #touchDiv {
      width: 200px;
      height: 200px;
      background-color: green;
      color: white;
      text-align: center;
      line-height: 200px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="touchDiv">触摸并取消</div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const touchDiv = document.getElementById('touchDiv');

      touchDiv.addEventListener('touchcancel', function(event) {
        // 更改元素的背景颜色
        touchDiv.style.backgroundColor = 'blue';
        // 修改文本内容
        touchDiv.textContent = '触摸已取消';
      });
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个带有id为touchDiv的<div>元素，通过CSS样式设置了其外观。在JavaScript中，我们在DOMContentLoaded事件中添加了一个touchcancel事件的监听器。

当用户在touchDiv元素上触摸事件发生期间，如果触摸被取消，touchcancel事件将被触发。事件处理函数中，我们将touchDiv元素的背景颜色改为蓝色，并将文本内容修改为"触摸已取消"。

五、touchenter：当手指触摸到元素边界时触发。

touchenter在触摸事件中表示手指触摸元素时进入元素的区域时触发，以下是一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <title>Touch Enter Event Example</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script>
    var box = document.getElementById('box');

    box.addEventListener('touchenter', function(event) {
      box.style.backgroundColor = 'red';
    });

    box.addEventListener('touchleave', function(event) {
      box.style.backgroundColor = '#ccc';
    });
  </script>
</body>
</html>

在这个例子中，当手指触摸 id 为 box 的 <div> 元素时，会触发 touchenter 事件，将 <div> 元素的背景颜色设置为红色。当手指离开元素时，会触发 touchleave 事件，将背景颜色恢复为灰色。

六、touchleave：当手指离开元素边界时触发。

touchleave 是一个事件，用于在触摸设备上检测手指离开元素的情况。它通常与其他触摸事件一起使用，如 touchstart、touchmove 和 touchend。当手指在元素上按下后移出元素时，touchleave 事件将被触发。

下面是一个简单的例子，演示了如何使用 touchleave 事件：

<!DOCTYPE html>
<html>
<head>
  <title>Touch Leave Event Example</title>
  <style>
    #target {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var targetElement = document.getElementById('target');

      targetElement.addEventListener('touchleave', function(event) {
        console.log('Finger left the target element.');
        // 在这里可以执行其他操作或触发其他事件
      });
    });
  </script>
</head>
<body>
  <div id="target"></div>
</body>
</html>

在上述例子中，我们创建了一个具有黄色背景的 <div> 元素作为目标元素。当手指按下目标元素并移动到元素外部时，控制台将输出 "Finger left the target element." 的消息。您可以根据需要在事件处理程序中执行其他操作或触发其他事件。

请注意，touchleave 事件只在手指离开元素时触发，不会在手指在元素内部移动时触发。

a辰龙a

关注

31
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
1
评论
【JavaScript】事件监听：触摸事件

JavaScript触摸事件是通过浏览器提供的Touch API来实现的。当用户在触摸屏设备上进行交互时，浏览器会捕捉到触摸事件，并将其传递给相应的JavaScript事件处理器。
复制链接

扫一扫