移动端tap事件穿透
2017-04-11 00:00
148 查看
对于移动端穿透bug,可能很多移动web开发的童靴都深有体会,到底何为穿透现象呢? 就是当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件。
![](http://www.iteye.com/javascripts/tinymce/plugins/emotions/img/smiley-laughing.gif)
尤其是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致,这个暂未求证。
如下图, 当点击关闭按钮,如果下面有商品a链接,则会穿透(关闭的同时,触发了链接);
![](http://dl.iteye.com/upload/picture/pic/134903/8cbdf9f2-cccb-3573-bb56-d00a08da6a42.jpg)
现象原因:
zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不 用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),所以在执行完tap事件之后,弹出来的选择组件马 上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的 元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。
解决方法如下:
1、使用github上有一个叫做fastclick的库;
2、监听touchend事件,并在事件中使用preventDefault()阻止冒泡;
Js代码
![](http://xiaoyan2016.iteye.com/images/icon_star.png)
$(".js-egg-close").on("touchend", function(e){ //这里使用touchstart事件也是可以的,
e.preventDefault();
$('.sec_dlg_eggs').remove();
$(".eggs_bg").remove();
});
3、使用css3的pointer-events=true,pointer-events=none切换来实现;
4.延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透,与jquery的动画(fadeIn(),fadeOut())等配合,个人感觉良好;
$(id).fadeIn(300);
5.如果还不奏效,终极解决方案是用click提代tap;
设置点击事件为_tap
Js代码
![](http://xiaoyan2016.iteye.com/images/icon_star.png)
_tap = touchend in document ? "touchend":"click"
这样在执行的过程中就可以直接调用div.on(_tap, function(){})
![](http://www.iteye.com/javascripts/tinymce/plugins/emotions/img/smiley-laughing.gif)
尤其是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致,这个暂未求证。
如下图, 当点击关闭按钮,如果下面有商品a链接,则会穿透(关闭的同时,触发了链接);
![](http://dl.iteye.com/upload/picture/pic/134903/8cbdf9f2-cccb-3573-bb56-d00a08da6a42.jpg)
现象原因:
zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不 用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计),所以在执行完tap事件之后,弹出来的选择组件马 上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的 元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。
解决方法如下:
1、使用github上有一个叫做fastclick的库;
2、监听touchend事件,并在事件中使用preventDefault()阻止冒泡;
Js代码
![](http://xiaoyan2016.iteye.com/images/icon_star.png)
$(".js-egg-close").on("touchend", function(e){ //这里使用touchstart事件也是可以的,
e.preventDefault();
$('.sec_dlg_eggs').remove();
$(".eggs_bg").remove();
});
3、使用css3的pointer-events=true,pointer-events=none切换来实现;
4.延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透,与jquery的动画(fadeIn(),fadeOut())等配合,个人感觉良好;
$(id).fadeIn(300);
5.如果还不奏效,终极解决方案是用click提代tap;
设置点击事件为_tap
Js代码
![](http://xiaoyan2016.iteye.com/images/icon_star.png)
_tap = touchend in document ? "touchend":"click"
这样在执行的过程中就可以直接调用div.on(_tap, function(){})
相关文章推荐
- zepto的tap事件的穿透分析
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件
- CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
- 移动端touch事件穿透解决办法
- 在移动端封装一个自己的tap事件
- WEB移动端的click ,tap ,touchend事件的对比
- 解决移动端点击事件的穿透问题之CSS3新属性:pointer-events
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端前端常见的触摸相关事件touch、tap、swipe等整理
- 去除移动端点击事件出现的背景框 tap-highlight-color
- 移动端WEB开发,click,touch,tap事件浅析
- Zepto tap 穿透bug、解决移动端点击穿透问题
- 移动端点击事件touch、tap、swipe等详解
- js核心基础之Events事件机制(移动端事件、PC端事件、事件穿透)
- CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
- CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
- fastclick.js移动端WEB开发,click,touch,tap事件浅析
- 移动端tap与click的区别 && 点透事件
- 移动端触屏click点击事件延迟问题,以及tap的解决方案