移动端touch、click、tap的区别与点透事件

最新推荐文章于 2024-03-16 17:50:45 发布

泊一

最新推荐文章于 2024-03-16 17:50:45 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： js

原文链接：https://www.cnblogs.com/luo1240465012/p/9450627.html

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、click 与tap比较

click与tap都会出发点击事件，但是在手机web端，click会有200-300ms延迟，所以一般用tap（轻击）代替click作为点击事件。singleTap 和 doubleTap分别代表单击和双击。

二、使用tap会出现点透事件（事件穿透）

很多用过Zepto（移动端开发的库）都说使用tap会出现点透事件。

1、什么是tap事件穿透

执行完上层绑定的tap事件后，下层如果绑定着click事件或者本身就存在点击事件(a/input)也会默认触发，这就是点透事件，

touch事件使上层的元素被隐藏，这个很重要，下层的被绑定的click事件元素就会出现在前面，touchend的默认行为就会触发click事件

2、出现点透事件的原因

首先要知道tap事件是通过监听绑定document上的touch事件来模拟的，并且tap 事件是冒泡到document上才出发的；

touchstart：在这个dom上用手触摸就能开始

click：在这个dom上用手触摸，且手指未曾移动，且在这个dom上手指离开屏幕，且触摸和离开时间很短（有的浏览器可能不检测时间间隔，照样可以出发click），才开始触发。

也就是说在移动端的事件触发从早到晚排序：touchstart touchstop click。所以click的触发是有延时的，大约300ms，所以click触发的原则是，触发当前有click的元素，且该元素面朝用户的最前端，才会触发click。

3、解决办法

（1）github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick

在dom ready时初始化在body上，如：

$(function(){
newFastClick(document.body);
})
然后给需要“无延迟点击”的元素绑定click事件即可。实战开发中，click响应速度比tap还要快一点。

（2）为元素绑定touchend事件，并在内部加上e.preventDefault();

复制代码
$A.on(‘touchend’,function(e){//而touchend是原生的事件，在dom本身上就会被捕获触发

$demo.hide()
e.preventDefault();

})
复制代码
监听touchend事件，阻止A元素的touchend的默认行为，从而阻止click事件的产生.

三、touch事件

主要有

touchstart事件：当手机触摸屏幕时触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上华东法人时候连续地触发。在这个事件发生期间，调用preventDefault（）事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的触发。关于这个实际的确切触发时间。

每个触摸事件都包括了三个触摸列表：

1.touches：当前位于屏幕上的所有手指的一个列表。

2.targetTouches：位于当前DOM元素上的手指的一个列表。

3.changedTouches：涉及当前事件的手指的一个列表。

例如，在一个touchend事件中，这就会是移开的手指。

这些列表由包含了触摸信息的对象组成：

1.identifier：一个数值，唯一标识触摸会话（touchsession）中的当前手指。

2.target：DOM元素，是动作所针对的目标。

3.客户/页面/屏幕坐标：动作在屏幕上发生的位置。

4.半径坐标和rotationAngle：画出大约相当于手指形状的椭圆形。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
      }
      .box2 {
        width: 400px;
        height: 400px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <!-- 1.引入fastclick.js文件 -->
    <script src="./fastclick.js"></script>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
      if ("addEventListener" in document) {
        document.addEventListener(
          "DOMContentLoaded",
          function() {
            FastClick.attach(document.body)
          },
          false
        )
      }
      var box1 = document.querySelector(".box1")
      var box2 = document.querySelector(".box2")
      // 为box1 绑定touch事件
      //   移动端的点透, 发生结构堆叠的情况, 脱离标准流的盒子隐藏掉之后,会触发标准流中盒子的事件
      box1.addEventListener("click", function() {
        // box1隐藏
        this.style.display = "none"
      })
      //   方式1 阻止默认行为
      //   box1.addEventListener("touchend", function(e) {
      //     e.preventDefault()
      //   })
      // fastclick 处理
      //   为box2绑定click事件
      box2.addEventListener("click", function() {
        console.log("我是box2")
      })
    </script>
  </body>
</html>

泊一

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
移动端touch、click、tap的区别与点透事件

一、click 与tap比较click与tap都会出发点击事件，但是在手机web端，click会有200-300ms延迟，所以一般用tap（轻击）代替click作为点击事件。singleTap 和 doubleTap分别代表单击和双击。二、使用tap会出现点透事件（事件穿透）很多用过Zepto（移动端开发的库）都说使用tap会出现点透事件。1、什么是tap事件穿透执行完上层绑定的tap事...
复制链接

扫一扫