• zepto之tap事件点透问题分析及解决方案


    点透现象出现的场景:

      当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件。在这种情况下,点击A/B重叠的部分,就会出现点透的现象。

    点透现象出现的原因:

      zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,并且tap事件是冒泡到document上触发的!!!

      在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchstart与click的区别如下:

      touchstart:在这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发;

      click:在这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动(某些<a href=”http://www.jd.com”>浏览器</a>允许移动一个非常小的位移值),且在这个DOM上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发

      也就是说,在移动端事件的触发时间按由早到晚排列为:touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的,这个时间大概在300ms左右。

      由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发时候,能够被点击的元素则是其下的B元素,根据click事件的触发规则:只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件。由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。

    点透现象解决方案:

    解决方案一:来得很直接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);

    解决方案二:

    对于B元素本身存在默认click事件的情况,应及用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生。

     $("#aa").on("touchend", function (event) {

         //很多处理比如隐藏什么的

         event.preventDefault();

     });

    对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。

    解决方案三:延迟一定的时间(300ms+)来处理事件

     $("#aa").on("tap", function (event) {

         setTimeout(function(){

         //很多处理比如隐藏什么的

         },320);

     });   

    这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果

    解决方案四: 理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,改用click。特别是对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。

  • 相关阅读:
    739. Daily Temperatures
    556. Next Greater Element III
    1078. Occurrences After Bigram
    1053. Previous Permutation With One Swap
    565. Array Nesting
    1052. Grumpy Bookstore Owner
    1051. Height Checker
    数据库入门及SQL基本语法
    ISCSI的概念
    配置一个IP SAN 存储服务器
  • 原文地址:https://www.cnblogs.com/wqhwe/p/5630557.html
Copyright © 2020-2023  润新知