zoukankan      html  css  js  c++  java
  • 移动端点透问题及其解决方案

    1.点透场景

    层A覆盖在层B上面,常见的有对话框等,层A用touchstart或者tap(zepto)事件点击进行隐藏或者移开,由于click晚于touchstart,超过300ms,当层A隐藏后,click到的是下面的层B,此时层B的click事件会触发,或者其上的a链接会跳转,input,select会调起键盘。

    zepto的tap事件原理
    zepto的tap事件是通过touchstart,touchend(android 4.0.x不支持touchend,通过touchmove 设置定时器触发touched)模拟出来的,
    事件是绑定在document上,大体思路是在touchstart的时候向对象附加点击的x,y;(其中还包含很多细节,比如设置最后点击时间,设置长按定时器等);
    touchmove的过程动态的计算手势在view上的偏移点,最后touchend 根据偏移点确定是否是点击,如果是点击动态的构建一个event然后根据
    设置的状态获取是单机、双击。

    非zepto的tap事件未必会出现点透问题。

    2.解决方法

    1> 使用一个(透明)遮罩层,屏蔽所有事件,然后400ms(对于IOS来说是个理想值)后自动隐藏

    .touchFix{visibility: hidden; 100%;height: 100%;position: absolute;left: 0px;top: 0px;z-index: 9999;}

    2> touchstart换成touchend,并且用preventDefault阻止默认事件,因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉

    $("#cbFinish").on("touchend", function (e) {
      e.preventDefault();
    });

    3> zepto最新版已经修复了这个问题,或者使用fastclick、hammer等通用库

    4> 直接用click,不考虑延迟
    5> 下层避开click事件,如a链接改为span等标签,使用js跳转页面

  • 相关阅读:
    快排算法的一点思考
    imglab .xml 标签格式转coco .json格式
    Ubuntu18.04 编译 sparse-ncnet
    Detectron2 keypoint_rcnn 网络c++版本部署
    技术部斗争
    我的程序人生
    关于ddd落地体验
    DevOps关于制定适合自身生产环境的redis集群
    从前端到后端的跨域攻击与防御
    DKIM对发送邮件的好处及使用方法
  • 原文地址:https://www.cnblogs.com/mengff/p/7277537.html
Copyright © 2011-2022 走看看