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

发布时间:2024年01月24日

目录

一、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 事件只在手指离开元素时触发,不会在手指在元素内部移动时触发。

文章来源:https://blog.csdn.net/weixin_47040861/article/details/135829232
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。