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

目录

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

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

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

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

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

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


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

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

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

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




  触摸事件示例
  


  
点击触摸

在这个示例中,我们有一个HTML文档,其中包含一个id为touchDiv的

元素。CSS样式定义了元素的外观。JavaScript代码直接嵌入在HTML文件中,在DOMContentLoaded事件中添加了一个touchstart事件监听器。当用户触摸touchDiv元素时,触发事件处理函数,将元素的背景颜色更改为红色,并更新文本内容为"已触摸"。

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

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

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




  触摸移动事件示例
  


  
触摸并移动

在这个例子中,我们创建了一个带有id为touchDiv的

元素,通过CSS样式设置了其外观。在JavaScript中,我们在DOMContentLoaded事件中添加了一个touchmove事件的监听器。

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

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

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




  触摸结束事件示例
  


  
触摸并松开

在这个例子中,我们创建了一个带有id为touchDiv的

元素,通过CSS样式设置了其外观。在JavaScript中,我们在DOMContentLoaded事件中添加了一个touchend事件的监听器。

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

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

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




  触摸取消事件示例
  


  
触摸并取消

在这个例子中,我们创建了一个带有id为touchDiv的

元素,通过CSS样式设置了其外观。在JavaScript中,我们在DOMContentLoaded事件中添加了一个touchcancel事件的监听器。

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

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

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




  Touch Enter Event Example
  


  

在这个例子中,当手指触摸 id 为 box 的

元素时,会触发 touchenter 事件,将
元素的背景颜色设置为红色。当手指离开元素时,会触发 touchleave 事件,将背景颜色恢复为灰色。

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

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

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




  Touch Leave Event Example
  
  


  

在上述例子中,我们创建了一个具有黄色背景的

元素作为目标元素。当手指按下目标元素并移动到元素外部时,控制台将输出 "Finger left the target element." 的消息。您可以根据需要在事件处理程序中执行其他操作或触发其他事件。

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

你可能感兴趣的:(javascript,开发语言)