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. jQuary学习の一の初期准备

    jQuery 的功能概括: 1.html 的元素选取 2.html的元素操作 3.html dom遍历和修改 4.js特效和动画效果 5.css操作 6.html事件操作 7.ajax异步请求方式 通 ...

  2. Python使用Scrapy框架爬取数据存入CSV文件(Python爬虫实战4)

    1. Scrapy框架 Scrapy是python下实现爬虫功能的框架,能够将数据解析.数据处理.数据存储合为一体功能的爬虫框架. 2. Scrapy安装 1. 安装依赖包 yum install g ...

  3. A+B for Input-Output Practice (VI)

    #include<iostream> using namespace std; void main() { int b,c,sum=0; while(scanf("%d" ...

  4. 纯代码实现WordPress评论回复自动添加@评论者的功能

    先看看效果: 这个有什么用呢?添加了@功能之后那些用户评论之间的层次关系就很清晰了,我们可以清楚地知道这些评论是谁发给谁的. 其实主要是为了提升逼格. 实现方法: 将下面代码加入function.ph ...

  5. 3Des加解密 C#--->Java

    Java的Byte范围为-128至127,c#的Byte范围是0-255.核心是确定Mode和Padding,关于这两个的意思可以搜索3DES算法相关文章. C#采用CBC Mode,PKCS7 Pa ...

  6. pyenv 安装

    sudo yum install openssl*     git clone https://github.com/yyuu/pyenv.git ~/.pyenv      echo 'export ...

  7. 金三银四跳槽季，BAT美团滴滴java面试大纲（带答案版）之一：Java基础篇

    Java基础篇: 题记:本系列文章,会尽量模拟面试现场对话情景, 用口语而非书面语 ,采用问答形式来展现.另外每一个问题都附上“延伸”,这部分内容是帮助小伙伴们更深的理解一些底层细节的补充,在面试中可 ...

  8. Java路径类问题总结

    一.获取路径: 单独的Java类中获得绝对路径根据java.io.File的Doc文挡,可知: 默认情况下new File("/")代表的目录为:System.getPropert ...

  9. 【原创】开启PowerShell远程管理

    非域网络,开启PowerShell远程管理,命令如下: 以下操作,PS命令窗口,必须都以管理员省份执行. Step 1: 机器A和B,分别开启PowerShell远程管理服务A = 192.168.3 ...

  10. 笔记：Struts2 拦截器

    配置拦截器 Struts.xml 配置文件中,使用<interceptor-/>来定义拦截器,有属性 name 表示拦截器的名称,class 表示拦截器的具体首先类,可以使用<par ...