zoukankan      html  css  js  c++  java
  • zepto的tap事件的穿透分析

    首先是什么情况下会发生zepto(tap)的事件穿透:

    当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转、input获取焦点)。

    原因:

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

    touchstart-->touchmove-->touchend-->click

    具体解决方案如下:

    1)  使用github上有一个叫做fastclick的库来替代Zepto的tap事件;不过听说有坑,但是我还没有遇到过。更多信息请查看: Fastclick 导致click事件触发两次的问题

    2)  监听touchend事件,并在事件中使用preventDefault()阻止冒泡(总是阻止冒泡)。

    $(".js-close").on("touchend", function(e){  //这里使用touchstart事件也可以
        $('.sec_ui_dlg').remove();
        $(".dlg_bg").remove();
        e.stopPropagation();
    });

    3)  使用css3的pointer-events=true,pointer-events=none切换来实现;(不推荐使用)

    4)  延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透,与jquery的动画(fadeIn(),fadeOut())等配合,感觉良好;
    $(id).fadeIn(300);(最好达到400以上)。
    5)tap后延迟350ms再隐藏mask(不如使用click)

    改动最小,缺点是隐藏mask变慢了,350ms还是能感觉到慢的

    只需要针对mask做处理就行,改动非常小,如果要求不高的话,用这个比较省力


    6)  如果还不奏效,终极解决方案是用click提代tap;
    //设置点击事件为_tap
    _tap = touchend in document ? "touchend":"click"  
    //这样在执行的过程中就可以直接调用
    div.on(_tap, function(){...})

    7)下下策:直接使用click.因为会带来300ms延迟,页面内任何一个自定义交互都将增加300毫秒延迟,想想都慢

    不用touch就不会存在touch之后300ms触发click的问题,如果交互性要求不高可以这么做, 强烈不推荐 ,快一点总是好的

  • 相关阅读:
    IOS开发之-Xcode插件
    IOS开发之-NS**概述
    python 中文乱码 问题深入分析
    Django入门示例之被解放的姜戈——03 所谓伊人(模板及模板处理)
    td太多内容显示...
    div 居中CSS实现
    取得页面元素类型 转
    aspose.words 处理word转PDF
    jacob 操作word转pdf
    ajax 数据回传
  • 原文地址:https://www.cnblogs.com/qianduanjingying/p/5685463.html
Copyright © 2011-2022 走看看