300ms，主要发生在mobile

  1. 为啥会出现300ms延迟现象

    • 浏览器想知道用户是否dobule tap(双击缩放)
  2. 下列情况不会出现300ms延迟
    • 桌面浏览器
    • meta的viewport设置了user-scalable=no（禁止缩放）
    • meta的viewport设置了width或者initial-scale
    • IE11+，设置了touch-action: manipulation;.For IE10 use -ms-touch-action: manipulation;

移动端点透

发生情况：

  1. A,B两个层上下重叠在Z轴中
  2. 绑定touchstart/touchend事件，使上层的A点击后消失
  3. B默认有click事件或B绑定了click事件

为什么会产生点透：

  1. 移动端事件执行顺序：touchstart -> touchend -> click

解决方案：

  1. 尽量用touch事件替换click事件
  2. 阻止a标签的click的情况：在消失元素的touchstart/touchend事件，调用event.preventDefault或者event.returnValue = false
  3. A和B都用click事件做绑定
  4. fastclick原理（在body中绑定监听事件，然后做出判断，是否需要调用preventDefault来处理）

以下为demo,跑一遍就能懂大概原理

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- wipe 300ms delay -->

    <!-- Instead of above code, your can see div2 has 300ms delay -->

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0">

    <style>

        *{

            margin: 0px;

            padding:0px;

        }

        #div1{

            width: 300px;

            height: 300px;

            background-color: rgba(255,0,0,0.25);

        }

        #div2{

            width: 240px;

            height: 240px;

            background-color: yellow;

            position: absolute;

            left: 30px;

            top: 30px;

            z-index: -1;

        }

        #console{

            border: 1px solid green;

            position: absolute;

            top: 300px;

            width: 100%;

        }

    </style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2">

       <a href="http://www.baidu.com">jump to baidu.com</a>

    </div>

    <div id="console"></div>

    <script>

        $ = function (id) {return document.getElementById(id)}

        var div1 = $("div1");

        var div2 = $('div2');

        var con = $('console');

        var sDate, eDate;

        function handle(e){

            // computed time interval

            if (sDate == null) {

                sDate = (new Date).getTime()

            }

            eDate = (new Date).getTime()

            var tar = e.target,

　　　　　　　　　 eve = e.type;

            // prevent 点透

            if(eve == "touchend") {

                console.log(tar)

                e.preventDefault();

            }

            var ele = document.createElement("p");

            ele.innerHTML = "target:"+ tar.id + " event:" + eve + ' interval: ' + (eDate-sDate) + 's';

            con.appendChild(ele);

            if(tar.id === "div1"){

                div1.style.display = "none";

            }

        }

        div1.addEventListener("touchend",handle);

        div1.addEventListener("touchstart",handle);

        div2.addEventListener("click",handle);

    </script>

</body>

</html>

移动端300ms与点透总结的更多相关文章

  1. 移动端300ms延迟问题和点击穿透问题

    一.移动端300ms延迟问题: 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会 ...

  2. 移动端300ms的点击延迟以及解决方案

    [今天做在移动端的一些效果时,我选择使用动画而不是用过渡,这个300ms的点击延迟是我为什么使用动画而不使用过渡最主要的一个原因] 动画和过渡 共同点:都是css控制DOM运动, 不同点: 1.过渡: ...

  3. 移动端300ms兼容问题（移动端经典问题）

    移动端300ms延迟原因 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌 ...

  4. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  5. 移动端300ms点击事件的延迟

    移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...

  6. 移动端300ms点击延迟

    移动端300ms点击延迟 原因:早期的苹果手机存在点击缩放,用手指在屏幕上快速双击后,iOS自带的Safari浏览器会将网页缩放至原始比例,后来很多浏览器也跟着学了. 解决方法:禁止缩放 <me ...

  7. touch-action 解决移动端300ms延迟问题

    CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, ...

  8. 解决移动端300ms延迟fastclick

    为什么要使用fastclick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了fastclick. f ...

  9. 移动端APP列表点透事件处理方法

    关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章. 这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题.出现这个问题的来由是因为在转场的时候,各个手机的转场效果不一样 ...

随机推荐

  1. [设计]GUI设计规范的规范

    1. 前言 很多著名的软件企业都有GUI设计规范,如 Apple 和 Google,得益于这些设计规范(或者叫指南),设计者才可以开发出符合平台视觉及交互要求的UI.其实除了这些大公司,软件公司都最好 ...

  2. Linux shell 脚本（一）

    一.初识脚本 shell:一类介于系统内核与用户之间的解释程序.脚本:一类使用特定语言,按预设顺序执行的文件批处理.宏.解释型程序创建shell脚本:理清任务过程--整理执行语句--完善文件结构1.任 ...

  3. Chrome游览器使用时，修改文件和网页刷新后，不能显示效果

    一:因为游览器缓存问题 有时候在写完代码后,刷新游览器,发现自己写的目标是让某一个东西隐藏,但是结果是依旧显示着,打开调试工具在Sources中发现,文件依旧是上次的旧的文件,新文件没有加载进去,无论 ...

  4. VMware静态地址上网

    虚拟机通过dhcp获取ip,当系统重启时可能导致ip变更,出现不必要的麻烦,以下是通过nat模式设置虚拟机静态ip同时能够上网的方式. 编辑VMware,依次点击“编辑”--“虚拟网络编辑器” 注:为 ...

  5. .Net小白的大学四年，内含面经

    大家好 我是码农阿宇,和博客园的广大兄弟一样,我们都喜欢.Net,但是你们是985/211,而我江西一所普通得不能再普通的二本大学---九江学院,大四毕业在即,英语四级未过(为什么强调这一点?见文末- ...

  6. 剑指Offer-求1+2+3+...+n

    package Other; /** * 求1+2+3+...+n * 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句( ...

  7. C语言第四次博客作业--嵌套循环

    一.PTA实验作业 题目1:编程打印空心字符菱形 1. 本题PTA提交列表 2. 设计思路(流程图) 3.本题调试过程碰到问题及解决办法 思考过程:将问题拆解为菱形问题和字母变化问题两部分 1> ...

  8. Junit test使用

    1.导入maven依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</arti ...

  9. 获取DOM节点的几种方式

    DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...

  10. eclipse打包