Zepto Click点透情况解决办法
“点透”是什么你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接)。这个被定义为这是一个“点透”现象。
在前面的项目中遇到了如下图的问题:在点击弹出来的选择组件的右上角完成后会让完成后面的input输入框聚焦,弹出输入键盘,也就是点透了
一、如何发生
点透事件据我的理解,就是因为Zepto在Click事件上有300毫秒的延迟,为了跟其他各种各样的乱七八糟的东西兼容。但是很不凑巧,我们是在一个模态弹出框上绑定了这样一个延迟300ms的点击事件,点击事件又会被冒泡到最下层,而最下层刚好是一个输入框。这样事件就会被这个输入框给捕捉,导致最上层事件无法触发(具体更深层次原因未知,只是知道不能被触发)。
二、解决办法
最简单,是实用,又不用增加其他代码量的方法就是将Click点击事件替换成touchend事件替换。例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
这样子就在移动端上很完美地解决了,没有了点透情况。但是,尼玛,PC端上又不兼容了。
突发奇想下,能不能同时绑定click和touchend事件,这样是不是就完美的解决了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
果然,真的解决了问题。查询一下原因:
事件优先级为: touchstart > touchend > click 。
在PC端上,没有touchend事件,只有click事件被绑定上了。
在移动端上,绑定了touchend和click事件,但是touchend事件优先级比click高,并且阻止了事件继续冒泡。所以两个端上都能完美实现效果,具体还有没有其他的问题暂时不得而知。
3、点透的解决方法:
方案一:来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick
引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
1 window.addEventListener( "load", function() { 2 FastClick.attach( document.body ); 3 }, false );
或者有zepto或者jqm的js里面加上
1 $(function() { 2 FastClick.attach(document.body); 3 });
当然require的话就这样:
1 var FastClick = require(‘fastclick‘); 2 FastClick.attach(document.body, options);
方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
1 $("#cbFinish").on("touchend", function (event) { 2 //很多处理比如隐藏什么的 3 event.preventDefault(); 4 });
方案三:延迟一定的时间(300ms+)来处理事件
1 $("#cbFinish").on("tap", function (event) { 2 setTimeout(function(){ 3 //很多处理比如隐藏什么的 4 },320); 5 });
这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果
理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,用click