知识 分享 互助 博彩评级

    博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    博彩评级提供网页素材下载、网站模板
    知识 分享 互助!

    zeptojs的tap事件点透问题的解决方案

    作者:佳明妈 来源:bubuko.com 2015-09-15 人气:
    zeptojs的tap事件点透问题的解决方案三种,如下: 方案一:来得很直接github上有个fastclick可以完美解决tap事件点透,还有其他4中方案供选择

    本文地址:http://www.qqydc.com/jiqiao/847.html
    文章摘要:zeptojs的tap事件点透问题的解决方案 ,庚癸频呼桥式起重经得起,外子当儿模型库。

    zeptojs的tap事件点透是因为tap事件是通过 touchstart 、touchmove 、 touchend 这三个事件来模拟实现的,在手机端事件机制中,触发touch事件后会紧接着触发touch事件坐标元素的click事件,
    因为B元素在300ms内刚好“掉”回来A的位置,所以就触发了B的click事件,而且zepto的tap事件都是代理到body上的,所以想通过e.preventDefault()阻止默认行为也是行不通的

    zeptojs的tap事件点透问题的解决方案三种,如下:

    方案一:来得很直接github上有个fastclick可以完美解决http://www.qqydc.com/880/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优化的问题,其实这个方案反而是最好的。
    ↓ 查看全文

    zeptojs的tap事件点透问题的解决方案由博彩评级收集整理,您可以自由传播,请主动带上本文链接

    博彩评级就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    zeptojs的tap事件点透问题的解决方案-最新评论

    • 11 2015-10-28 12:10:55
      爱情永远比婚姻圣洁,婚姻永远比爱情实惠。
    • 日版张柏芝 2015-10-28 12:27:55
      爱情永远比婚姻圣洁,婚姻永远比爱情实惠。
    • 校花周昕妤 2015-10-09 08:53:45
      一个人能走多远,要看他有谁同行;一个人有多优秀,要看他有谁指点;一个人有多成功,要看他有谁相伴。
    • 校花周昕妤 2015-10-09 08:53:38
      [大汗]
    • 11 2015-10-09 08:10:45
      一个人能走多远,要看他有谁同行;一个人有多优秀,要看他有谁指点;一个人有多成功,要看他有谁相伴。