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. linux实验一 双系统安装

    (一)首先来简要了解一些linux的概念! 1.发行版本和内核版本的区别与联系:linux发行版本是"内核版本+一系列挂载软件"的集合体,光是一个内核版本是无法当做操作系统运行的. ...

  2. 图之单源Dijkstra算法、带负权值最短路径算法

    1.图类基本组成 存储在邻接表中的基本项 /** * Represents an edge in the graph * */ class Edge implements Comparable< ...

  3. 关于eclipse新建项目问题

    新建Dynamic Web Project项目的时候不能有中文名和空格. 不然会报错:The requested resource is not available. 里面的文件名也不能有中文名和空格 ...

  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. 自创最精简的python装饰器

    个人心血原创,欢迎转载,请注明作者和出处.否则依法追究法律责任!!!! author:headsen  chen date:2018-03-21  10:37:52 代码: 代码解析过程:1,def ...

  6. route路由的顺序问题了数据包的转发流程

    2018-02-28   15:29:26 [root@linux ~]# routeKernel IP routing tableDestination     Gateway           ...

  7. Nagios详解（基础、安装、配置文件解析及监控实例）

    一.Nagios基础 1.简介Nagios是一款开源网络监视工具.可监控网络服务(SMTP.POP3.HTTP.NNTP.ICMP.SNMP.FTP.SSH.PING---).监控主机资源.根据需求设 ...

  8. Xcode9的xib只支持iOS7.0及以上版本

    Xcode升级到9以后,对xib的最低编译版本有了限制,以前未指定版本的xib会报错,如下 遇到这个情况,根据错误提示很明显提示的是ib文件支持的最低版本是iOS7,所以我就将该xib的版本设为iOS ...

  9. 【Python】 zabbixAPI的包装pyzabbix

    pyzabbix pyzabbix是zabbixAPI的第三方python包装.从网上莫名其妙地搞到了一份源码,看了一下之后发现实现方法还蛮巧妙的,感觉挺好的就记下来了.那些个源码本身其实也是一个个单 ...

  10. Konckout第一个实例：简单数据模型绑定

    Konck是什么: http://www.aizhengli.com/knockoutjs/50/knockout.html 使用:直接引入knockout.js文件 第一个实例:实现输入框输入值改变 ...