More than code
Welcome to the website

zepto中tap事件的点透问题

1. 前言

最近发现很多人遇到了zepto中tap点透的问题,网上查阅了很多的资料,并没有发现很好的文章,正好最近在做移动端网站的开发,整理如下。

2. 什么是点透现象( What)

其实点透的出现场景可以总结如下:
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。(这一点很重要)
3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件。
在以上情况下,点击A/B重叠的部分,就会出现点透的现象。

 <!-- html --> 
 <a href="http://www.baidu.com">点击跳转到百度</a>
 <div class="modal"></div>
/*css*/
 .modal {
     position: absolute;
     top: 0;
     left: 0;
     width: 200px;
     height: 100px;
     background-color: rgba(255,0,0,0.5);
 }
 /*JavaScript*/
 <script src="./node_modules/zepto/dist/zepto.js"></script>
 <script src="./node_modules/zepto/src/touch.js"></script>
 <script>
    Zepto(function($){
       $(".modal").on("tap",function(){
          $(this).hide();
       })
    })
 </script>

注意:这里引入的touch.js模块不在zepto.js模块中,需要单独引入,可以使用npm下载zepto,在src文件夹中就可以找到touch.js

效果如图

当在文字上方点击模态窗时,模态窗隐藏,但是a标签同时也被触发,发生跳转

这就是点透现象。

3. 点透现象出现的原因(Why)

为什么会有tap事件?

click 和 tap两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以用tap代替click作为点击事件。

分析zepto的源码我们发现,zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因),所以在执行完tap事件之后,弹出来的模态窗马 上就隐藏了,此时click事件还在延迟的300ms之中,当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素,如果正下方的 元素绑定的有click事件此时便会触发,如果没有绑定click事件的话就当没click,但是正下方的是input输入框(或者select选择框或 者单选复选框),点击默认聚焦而弹出输入键盘,也就出现了上面的点透现象。

4. 解决办法(How)

(1)引入fastclick库

github上fastclick库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如:

$(function(){
    FastClick.attach(document.body);
})

然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。

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

$(".modal").on( 'touchend' , function (e){ 
    //改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault(); //阻止“默认行为”
})

(3)延迟一定的时间(300ms+)来处理事件

 $("#aa").on("tap", function (event) {
     setTimeout(function(){
        //很多处理比如隐藏什么的
     },320);
 });

此方法可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果。

4. 总结

个人比较倾向于引入fastclick.js,用着比较习惯。还有网友表示,最新的zepto版本修复了tap的点透现象,这里用的是zepto的最新版本(v1.2.0)做测试,并没有发现修复该问题。

赞(0) 打赏
未经允许不得转载:李帅帅空间 » zepto中tap事件的点透问题

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏