zeptojs的tap事件点透问题的解决方案
作者：佳明妈 来源：bubuko.com 2015-09-15 人气：zeptojs的tap事件点透问题的解决方案三种，如下： 方案一：来得很直接github上有个fastclick可以完美解决tap事件点透，还有其他4中方案供选择
zeptojs的tap事件点透是因为tap事件是通过 touchstart 、touchmove 、 touchend 这三个事件来模拟实现的，在手机端事件机制中，触发touch事件后会紧接着触发touch事件坐标元素的click事件，
因为B元素在300ms内刚好“掉”回来A的位置，所以就触发了B的click事件，而且zepto的tap事件都是代理到body上的，所以想通过e.preventDefault()阻止默认行为也是行不通的
zeptojs的tap事件点透问题的解决方案三种，如下：
方案一：来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick
引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});
当然require的话就这样：
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);
方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
$("#cbFinish").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
方案三：延迟一定的时间(300ms+)来处理tap事件
$("#cbFinish").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
这种方法其实很好，可以和fadeInIn/fadeOut等动画结合使用，可以做出过度效果，但是有一个缺点就是有320ms延时，如果是为了去掉click的300ms延时而用了tap的话，这里又加个320ms延时，还不如直接用click事件。
方案四：a链接改为span等标签，使用js跳转页面（不考虑SEO-推荐）
适用于部分场景，如果触发tap事件的层下面层中没有其他click事件注册，只是有a链接，因为click事件会让a链接跳转，这个时候如果出现点透，下层的a链接就会在上层tap后触发跳转，
所以我们就可以把a链接换成span等非a链接标签，然后所有的点击动作事件一律使用tap事件，就避免了这个链接跳转的问题。
如果你的webapp不考虑SEO优化的问题，其实这个方案反而是最好的。
所以我们就可以把a链接换成span等非a链接标签，然后所有的点击动作事件一律使用tap事件，就避免了这个链接跳转的问题。
如果你的webapp不考虑SEO优化的问题，其实这个方案反而是最好的。
↓ 查看全文
zeptojs的tap事件点透问题的解决方案由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
zeptojs的tap事件点透问题的解决方案-最新评论