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

1、什么是点透？

举例说明：下图B元素是黄色方块，B元素中包含了C元素，C元素是一个a链接，本身自带click事件按，然后又一个半透明的粉色元素A遮盖在B元素上（看图中A元素是覆盖在B元素上的，不然B元素区域应该是正黄色，现在是橙黄色，证明B上面被A覆盖着）；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Title</title><style>*{margin:0;padding:0;}#div1{width:300px;height:300px;background-color:rgba(255,0,0,.25);}/*红色半透明遮盖层*/#div2{width:240px;height:240px;background-color:yellow;position:absolute;left:30px;top:30px;;z-index:-1;}/*黄色内容层B*/#console{border:1px solid green;position:absolute;top:300px;width:100%;}/*绿色状态输出框*/</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"><a href="www.baidu.com">www.baidu.com</a>
</div>
<div id="console"></div>
<script>var div1=document.getElementById('div1');var div2=document.getElementById('div2');var con=document.getElementById('console');function handle(e){  /*#div1点击的时候touchstart\touchend都会触发这个事件，然后通过e.type判断事件类型来区分是touchstart还是touchend*/var tar= e.target,eve= e.type;var ele=document.createElement('p');ele.innerHTML='target:'+tar.id+'event:'+eve;con.appendChild(ele);if(tar.id==='div1'){div1.style.display='none';}}div1.addEventListener('touchend',handle);div1.addEventListener('touchstart',handle);
</script>
</body>
</html>

上面代码点击图中除C区域以外的地方，当然是说A、B，都不会出现任何问题，结果如下：

target:div1 event:touchstart
target:div1 event:touchend

但是当你点击元素C的时候首先A元素会消失，然后页面会跳转到百度首页，按理来说A元素遮盖住了元素B、C，但是这里A的touchstart事件却点透了A元素，触发了C元素上的click事件，这就是传说中的点透。

为了更清楚的看到这个过程，我们在B元素上也绑定一个click事件，

div2.addEventListener('click',handle);

点击B区域，结果如下：

target:div1 event:touchstart
target:div1 event:touchend
target:div2 event:click

可见先触发了A元素上的touchstart、touchend事件，之后又触发了B元素上的click事件，这也是点透现象的证明。

2、点透现象出现的场景

　　1、A、B两个元素上下Z轴重合，就是上下摞一起了；

　　2、上层的A点击后消失（这点很重要）;

　　3、B本身有默认click事件（如a标签），或者B元素本身绑定了click事件；

　　4、在以上情况下，点击A、B重叠的部分，就会出现点透现象。

3、点透产生的原因

click延迟，延迟，还是延迟！！！

在移动端不适用click事件，而是用touch事件代替，就是因为click事件有着明显的延迟，具体touch和click的区别如下：

1、touchstart，在这个DOM（或冒泡到这个DOM）上手指触摸就能触发；
2、click，在这个DOM上手指触摸，且手指未曾在屏幕上移动（某些浏览器允许一个非常小的位移值），且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的时间间隔较短（某些浏览器不检测间隔时间，也会触发click）才能触发。

也就是说，事件的触发事件从早到晚为：touchstart早于touchend，早于click，亦即click的触发是有延迟的，这个时间大概是300ms。

由于我们在touchstart阶段就隐藏了A元素，当click被触发时候，能够被点击的元素则是其下的B元素。

4、解决方案

　　1、对于B元素本身没有默认click事件的情况下（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端延迟要大很多，不利于用户体验，所以触摸事件应尽量使用touch事件。

　　2、对于B元素本身存在默认click事件的情况，应即时取消A元素的默认点击事件，阻止click事件的产生，即给A元素绑定touchend事件，在事件中阻止默认行为：

 $("#div1").on("touchend", function (event) {event.preventDefault();});

　　3、针对遮盖层使用click事件，而不是touch事件，这是因为遮盖层的点击有小延迟也是没有关系的，反而会有疑似更好的用户体验。

5、现有解决方案框架（库）

　　1、众所周知，zepto的tap事件存在点透现象，但是最新版的zepto已经解决了这个问题，

　　2、在zepto修复问题之前，有fastclick、hammer等通用库可以使用。

本文参考了http://www.cnblogs.com/zldream1106/p/3670988.html、http://www.cnblogs.com/wqhwe/p/5630557.html的文章。

转载于:https://www.cnblogs.com/learnings/p/7065276.html

移动端tap或touch类型事件的点透问题认识相关推荐

HTML5滑动(swipe)事件,移动端触摸（touch）事件
目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touc ...
js触摸（touch）事件
移动端触摸(touch)事件移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的, ...
移动端web开发---Touch事件详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题移动设备主要特点是不配备鼠标,键盘 ...
H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
按键精灵 android版运行异常,按键精灵安卓版 tap、touch命令不好用的解决办法！...
用按键精灵手机版写脚本来操作新浪微博APP,在关注列表页自动取消关注,代码如下: If x > -1 And y > -1 Then delay 1000 tap x,y delay 10 ...
工作手记之移动端中文输入法触发oninput事件的解决方法
事件背景工作过程中涉及到了移动端输入内容长度的限定,这就要求需要对输入过程中内容的变化进行监控和判定,以决定是否可以继续输入,所以就想着是否可以在相关输入处监听oninput事件?但是在手机端,中文 ...
ios系统苹果手机微信端取消默认长按事件
ios系统苹果手机微信端取消默认长按事件 css代码: body{ -webkit-user-select: none; / 文本不能被选择/ user-select: none; -webkit-t ...
vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法
最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的.经过一番研究才发现是vue事件点击穿透引起 ...
vue 点击弹出文字_vue事件点击穿透解决大法，看这篇文章就够了
作者/sherry 最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的. 经过一番研究才发现是 ...
移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

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

移动端tap或touch类型事件的点透问题认识相关推荐

最新文章

热门文章