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. kafka集群参数解析server.properties

    #server.properties配置文件 broker.id=1 port=9092 host.name=url1 zookeeper.connect=url1:2181,url2:2181,ur ...

  2. js筛选

    1.filter():筛选函数 1>:筛选单个元素, object.filter("selector") 2>筛选多个元素: object.filter("s ...

  3. Java集合框架（一）

    原文  http://www.jianshu.com/p/e31fb2600e4f 集合类存放于java.util包中,集合类存放的都是对象的引用,而非对象本身,出于表达上的便利,我们称集合中的对象就 ...

  4. Intellij +Maven 报错: Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    在intellij使用 Maven Project 测试时,运行test时看到log里的报错信息: -Dmaven.multiModuleProjectDirectory system propert ...

  5. 解决新版的vue-cli后无法通过ip访问vue项目

    今天遇到个问题,之前一直没遇到过,通过vue-cli脚手架搭建的项目,只能通过localhost访问,不能通过IP地址访问. 这是由 webpack 导致的,2017年11月12日的时候 webpac ...

  6. TensorFlow-谷歌深度学习库 体验一二三

    一个TensorFlow的运算可以看作是一个数据流图. 一个图呢则由一组操作和数据集组成. 操作(operation)代表运算单元 数据(tensor) 代表在各运算单元流动的数据单元 要想使用一个数 ...

  7. [Luogu 1402] 酒店之王

    题目 Description XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等,也有自己所爱的菜,但是该酒店只有p间房间,一天只有 ...

  8. C++基于范围循环（range-based for loop）的陷阱

    C++的基于范围的循环是C++11出现的新特性,很方便,一定程度上替代了使用迭代器的for循环用法.不过基于范围的for循环有一个隐藏的陷阱,如果不注意可能会出现严重的内存错误. 举例说明 看下面这个 ...

  9. 大数据 --> Kafka集群搭建

    Kafka集群搭建 下面是以三台机器搭建为例,(扩展到4台以上一样,修改下配置文件即可) 1.下载kafka http://apache.fayea.com/kafka/0.9.0.1/ ,拷贝到三台 ...

  10. 源码实现 --> strrev

    字符串的顺序反序 函数 char *strrev(char *string); 将字符串string中的字符顺序颠倒过来. NULL结束符位置不变. 返回调整后的字符串的指针. 源码 //其基于的思想 ...