前言

为什么通过touch可以触发click事件?

touch事件的来源

PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedownmouseupmousemoveclick事件。一次点击行为,事件的触发过程为:mousedown -> mouseup -> click 三步。

手机上没有鼠标,所以就用触摸事件去实现类似的功能。touch事件包含touchstarttouchmovetouchend,注意手机上并没有tap事件。手指触发触摸事件的过程为:touchstart -> touchmove -> touchend

手机上没有鼠标,但不代表手机不能响应mouse事件(其实是借助touch去触发mouse事件)。有人在PC和手机上对事件做了对比实验,以说明手机对touch事件响应速度快于mouse事件。

可以看到在手机上,当我们手触碰屏幕时,要过300ms左右才会触发mousedown事件,所以click事件在手机上看起来就像慢半拍一样。

tap是怎么来的

我们在上面看到,手机上响应 click 事件会有300ms的延迟,那么这300ms到底是干嘛了?浏览器在 touchend 后会等待约300ms,原因是判断用户是否有双击(double tap)行为(主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大)。如果没有 tap 行为,则触发 click 事件,而双击过程中就不适合触发 click 事件了。由此可以看出 click 事件触发代表一轮触摸事件的结束。

既然说tap事件是模拟出来的,我们可以看下Zepto对 singleTap 事件的处理。见源码 136-143 行,可以看出在 touchend 响应 250ms 无操作后,则触发singleTap。

注意:singleTap和doubleTap分别代表单次点击和双次点击。

点击穿透的场景

即点击会触发非当前层的点击事件。

有了以上的基础,我们就可以理解为什么会出现点击穿透现象了。我们经常会看到“弹窗/浮层”这种东西,我做个了个demo。

整个容器里有一个底层元素的div,和一个弹出层div,为了让弹出层有模态框的效果,我又加了一个遮罩层。

<div class="container">

<div id="underLayer">底层元素</div>

<div id="popupLayer">

<div class="layer-title">弹出层</div>

<div class="layer-action">

<button class="btn" id="closePopup">关闭</button>

</div>

</div>

</div>

<div id="bgMask"></div>

然后为底层元素绑定 click 事件,而弹出层的关闭按钮绑定 tap 事件。

$('#closePopup').on('tap', function(e){

$('#popupLayer').hide();

$('#bgMask').hide();

});

$('#underLayer').on('click', function(){

alert('underLayer clicked');

});

点击关闭按钮,touchend首先触发tap,弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了,则继续触发click,由于这时弹出层已经消失,所以当前click事件的target就在底层元素上,于是就alert内容。整个事件触发过程为 touchend -> tap -> click。

而由于click事件的滞后性(300ms),在这300ms内上层元素隐藏或消失了,下层同样位置的DOM元素触发了click事件(如果是input框则会触发focus事件),看起来就像点击的target“穿透”到下层去了。

结合Zepto源码的解释

zepto中的 tap 通过兼听绑定在 document 上的 touch 事件来完成 tap 事件的模拟的,是通过事件冒泡实现的。在点击完成时(touchstart / touchend)的 tap 事件需要冒泡到 document 上才会触发。而在冒泡到 document 之前,手指接触和离开屏幕(touchstart / touchend)是会触发 click 事件的。

因为 click 事件有延迟(大概是300ms,为了实现safari的双击事件的设计),所以在执行完 tap 事件之后,弹出层立马就隐藏了,此时 click 事件还在延迟的 300ms 之中。当 300ms 到来的时候,click 到的其实是隐藏元素下方的元素。

如果正下方的元素有绑定 click 事件,此时便会触发,如果没有绑定 click 事件的话就当没发生。如果正下方的是 input 输入框(或是 select / radio / checkbox),点击默认 focus 而弹出输入键盘,也就出现了上面的“点透”现象。

穿透的解决办法

穿透的原因其实就是tap事件先于click事件300ms执行

1. 遮挡

我们可以动态地在触摸位置生成一个透明的元素,这样当上层元素消失而延迟的click来到时,它点击到的是那个透明的元素,也不会“穿透”到底下。在一定的timeout后再将生成的透明元素移除。具体可见demo

2. pointer-events

pointer-events是CSS3中的属性,它有很多取值,有用的主要是autonone,其他属性值为SVG服务。

关于使用 pointer-events 后的事件冒泡,有人做了个实验,见代码

因此解决“穿透”的办法就很简单,对下面的元素设置pointer-eventsdemo如下

$('#closePopup').on('tap', function(e){

$('#popupLayer').hide();

$('#bgMask').hide();

$('#underLayer').css('pointer-events', 'none');

setTimeout(function(){

$('#underLayer').css('pointer-events', 'auto');

}, 400);

});

3. fastclick

使用fastclick库,其实现思路是,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉(参看源码 164-173 行),用 touchend 模拟快速点击行为(参看源码 521-610 行)。

window.addEventListener("load", function () {
FastClick.attach(document.body);
}, false);

从此所有点击事件都使用click来绑定,不会出现“穿透”的问题,并且没有300ms的延迟。解决穿透的demo

有人(叶小钗)对事件机制做了详细的剖析,循循善诱,并剖析了fastclick的源码以自己模拟事件的创建。请看这篇文章,看完后一定会对移动端的事件有更深的了解

  • 注意点: 框架必须在前面调用, 并且所有的元素都被注册了fastclick中的事件, 以后所有的click事件都是fastclick的click事件

4. 延迟

方法一:延时动画

由于 click 事件的滞后性,在这段时间内原来点击的元素消失了,于是便“穿透”了。因此我们顺着这个思路就想到,可以给元素的消失做一个fade效果,类似jQuery里的fadeOut,并设置动画duration大于300ms,这样当延迟的 click 触发时,就不会“穿透”到下方的元素了。

同样的道理,不用延时动画,

方法二:对tap做延迟

tap(ele, function () {
setTimeout(function () {
ele.style.display = 'none';
}, 300);
})

参考资料

手持设备点击响应速度,鼠标事件与touch事件的那些事

点击穿透

fastclick

彻底解决tap“点透”,提升移动端点击响应速度

也来说说touch事件与点击穿透问题

zepto学习(二)之tap事件以及tap事件点透处理的更多相关文章

  1. 前端学习(二十三)DOM操作,事件(笔记)

    javascript 组成部分    1.ECMAScript        javascript的核心解释器 2.DOM        Document Object Modle         文 ...

  2. 【zepto学习笔记03】事件机制

    前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 ze ...

  3. 移动端tap与click的区别 && 点透事件

    移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...

  4. 移动端tap或touch类型事件的点透问题认识

    1.什么是点透? 举例说明:下图B元素是黄色方块,B元素中包含了C元素,C元素是一个a链接,本身自带click事件按,然后又一个半透明的粉色元素A遮盖在B元素上(看图中A元素是覆盖在B元素上的,不然B ...

  5. 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件

    [源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 作者: ...

  6. HTML5触摸事件演化tap事件

    触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...

  7. appium+python自动化37-adb shell模拟点击事件(input tap)

    前言 appium有时候定位一个元素很难定位到,或者说明明定位到这个元素了,却无法点击,这个时候该怎么办呢? 求助大神是没用的,点击不了就是点击不了,appium不是万能的,这个时候应该转换思路,换其 ...

  8. appium+python自动化-adb shell模拟点击事件(input tap)

    前言 appium有时候定位一个元素很难定位到,或者说明明定位到这个元素了,却无法点击,这个时候该怎么办呢? 求助大神是没用的,点击不了就是点击不了,appium不是万能的,这个时候应该转换思路,换其 ...

  9. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

随机推荐

  1. 验证HashSet和HashMap不是线程安全

    JAVA集合类: java.util包下的HashSet和HashMap类不是线程安全的, java.util.concurrent包下的ConcurrentHashMap类是线程安全的. 写2个测试 ...

  2. ThinkPHP6.0学习之项目安装页面的开发

    在我们做一个项目的时候,如果是自己用或者是给同行用的话往往不需要做一个安装页面的,但是如果是将项目给一些不怎么会操作服务器,不怎么会程序的人用的时候,我们就需要一个安装页面来帮助他们更好的将项目安装好 ...

  3. 使用极路由进行外网映射,本地电脑做服务器,运行javaWeb项目

    最近在学习javaWeb,一个项目需要android访问服务器,于是使用自己的笔记本电脑作为服务器,需要进行端口映射.使得外网可以访问自己的javaWeb项目或者网站之类的.普通路由请看:http:/ ...

  4. Redis CrackIT 入侵事件引发Linux 沦陷

    ▲针对全球6379端口的redis服务器做了扫描,结果如上图 如图开放在公网的redis的6379端口的ip总数有63443个.无密码认证的IP有43024个,在总数占比里达到67%.发现遭受到red ...

  5. 使用xhprof进行线上PHP性能追踪及分析

    转自: http://avnpc.com/pages/profiler-php-performance-online-by-xhprof

  6. CentOS7.5使用RPM包安装MySQL5.7.22

    参考:https://blog.csdn.net/sevenkoala/article/details/76163853 1,安装环境查看 2,下载安装rpm包 下载地址:https://downlo ...

  7. java工具类学习,系统中用户密码加密总结

    现在项目,用户注册登录部分很少有涉及到了,原因:现在热门开发框架都已经在底层帮我们做了一套用户注册,密码加密,登录认证,权限控制,缓存数据等基本功能. 这有利于项目的快速完成,只需要搬砖码畜们专注于业 ...

  8. centos7 vim环境优化

    centos7默认是使用vi,而不是使用vim,所以,我们需要修改一下vi的别名,并且,我们使用neovim,vi毕竟还是有很多功能比较原始 所以 yum install neovim -ycat & ...

  9. DOTS默认情况下的性能

    利用Unity全新的高性能多线程数据导向技术堆栈(DOTS),充分利用当今的多核处理器.您的游戏运行速度更快,您的代码更易于在其他项目中阅读和重用. 重建Unity的核心 我们正在使用高性能多线程数据 ...

  10. 【FFMPEG】Ubuntu上安装FFMPEG

    在之前,我们成功地使用mingw+msys在Windows平台下编译FFmpeg(见 http://www.linuxidc.com/Linux/2014-11/109839.htm),并生成了ffp ...