移动端中的所有事件以及代码演示讲解

盛夏绽放

于 2024-08-19 19:47:14 发布

阅读量351

点赞数 14

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/x15514104477/article/details/141332884

版权

移动端中的所有事件主要包括click事件、touch事件、tap事件，以及一系列与触摸相关的事件如swipe、longTap等。

一.触摸（touch）事件：

1.定义：

touch事件是专为触摸屏设备设计的一系列操作，包括触摸开始、触摸移动和触摸结束。

2.应用场景：

常用于实现一些复杂的交互效果，如拖拽、缩放等。

3.技术点：

touch事件包括touchstart、touchmove、touchend和touchcancel。它们分别对应手指接触屏幕、移动、离开屏幕和由于其他行为（如接电话）打断当前操作的情况。
touchstart： 当手指触摸屏幕时触发。
touchmove： 当手指在屏幕上移动时触发。
touchend： 当手指离开屏幕时触发。

4.代码演示：

element.addEventListener('touchstart', function(event) {
  console.log('触摸开始');
});

element.addEventListener('touchmove', function(event) {
  console.log('手指移动');
});

element.addEventListener('touchend', function(event) {
  console.log('触摸结束');
});

二.点击（click）事件：

1.定义：

click事件在用户点击某个元素时触发，是最常用的事件之一。

2.应用场景：

主要用于处理简单的点击操作，例如打开链接、提交表单等。

3.技术点：

由于移动端的click事件会有大约300毫秒的延迟，这在一些需要快速响应的应用中是不可接受的。解决方案包括使用fastclick库来消除延迟。
click： 当用户点击屏幕时触发。

4.代码演示：

element.addEventListener('click', function(event) {
  console.log('点击事件');
});

三.tap事件

1.定义：

tap事件是一个高级事件，封装了click和touch事件，可以在触摸屏和非触摸屏设备上触发。
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发

2.应用场景：

主要用于替代click事件，提高在移动设备上的适应性。

3.技术点：

tap事件能够避免click事件的300ms延迟问题，但可能引发新的bug，例如点击穿透。

4.代码演示：

注意：标准事件中没有tap事件，tap事件是zepto，使用touch进行封装的
zepto.js 移动端jQuery
https://zeptojs.com/ touch.js 基于zepto的移动端事件（点击）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tap Event Demo</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
   <button id="myButton">Click Me!</button>
   <script>
       $(document).on('touchstart', function(e) {
           var target = $(e.target);
           if (!target.hasClass('ignore-tap')) {
               target.data('isMoved', false);
           }
       });

       $(document).on('touchmove', function(e) {
           var target = $(e.target);
           if (!target.hasClass('ignore-tap')) {
               target.data('isMoved', true);
           }
       });

       $(document).on('touchend', function(e) {
           var target = $(e.target);
           if (!target.hasClass('ignore-tap') && !target.data('isMoved')) {
               target.trigger('tap');
           }
       });

       $('#myButton').on('tap', function() {
           alert('Button tapped!');
       });
   </script>
</body>
</html>

四.swipe事件

1.定义：

swipe事件系列包括swipe、swipeLeft、swipeRight、swipeUp和swipeDown。
swipe： 手指在屏幕上滑动时会触发
swipeLeft： 手指在屏幕上向左滑动时会触发
swipeRight： 手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发

2.应用场景：

主要用于处理滑动操作，如图片轮播、页面切换等。

3.技术点：

这些事件分别对应用户在屏幕上进行不同方向的滑动操作。

4.代码演示：

document.getElementById("myElement").addEventListener("swipeleft", function() {
    alert("Swiped left!");
});

五.手势事件

1.定义：

手势事件包括多点触控的各种操作，如缩放、旋转等。

2.应用场景：

主要用于实现复杂的手势识别和控制，如地图的缩放、图片的旋转等。

3.技术点：

需要对多个触摸点的位置、移动轨迹进行分析，以识别具体的手势类型。

4.代码演示：

document.getElementById("myElement").addEventListener("gesturechange", function(event) {
    console.log("Gesture changed:", event.scale, event.rotation);
});

5.代码解释：

这段代码是JavaScript中的一个事件监听器，用于监听名为"myElement"的元素上的"gesturechange"事件。当这个事件发生时，会执行一个匿名函数，该函数接收一个名为"event"的参数。在这个函数内部，它会打印出事件的scale（缩放比例）和rotation（旋转角度）。

六.指针事件

1.定义：

指针事件（PointerEvent）是一种更通用的事件类型，支持包括鼠标、触摸和触控笔在内的多种输入设备。

2.应用场景：

适用于需要在多种设备上实现一致交互效果的场景。

3.技术点：

指针事件提供了丰富的属性，如指针压力、角度等，可以更精确地控制交互过程

4.代码演示：

document.getElementById("myElement").addEventListener("pointerdown", function(event) {
    console.log("Pointer down at:", event.clientX, event.clientY);
});

5.代码解释：

这段代码是JavaScript中的一个事件监听器，用于监听名为"myElement"的元素上的"pointerdown"事件。当这个事件发生时，会执行一个匿名函数，该函数接收一个名为"event"的参数。在这个函数内部，它会打印出事件的clientX和clientY属性，分别表示鼠标指针在浏览器窗口中的横坐标和纵坐标。