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. c#多线程同步之EventWaitHandle使用

    有这么一个场景,我需要借助windows剪贴板把数据插入到word域中. 实现步骤: 1.把剪贴板数据保存到变量. 2.使用剪贴板实现我们的业务. 3.把变量里的数据存回剪贴板. 但是结果却令人诧异, ...

  2. 18.CSS

    选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> # ...

  3. 查看 SELinux状态|关闭SELinux

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  4. gradle build docker image

    前言:其实gradle-docker插件干的事和我们手动制作镜像是一样的,只不过它封装了一些步骤而已. eg:如果我们要将项目打包成镜像,首先我们要写Dockerfile,这是制作镜像的不可或缺的第一 ...

  5. win8.1下无法运行vc++6.0的解决方法

    参考网址: http://wenku.baidu.com/link?url=A6mzeCDLNW1vCV7Vm5p83jqSzguiOFlH5FX-7kdN9NJXS_ORXYuaVDn1Prnz_F ...

  6. PHP面试和PHP开发者都应掌握的10个问题

    PHP面试和PHP开发者都应掌握的10个问题 问题 :1 MySQL里的存储引擎有什么不同,哪一个是默认的? 答案: 1 我们可以一下存储引擎: 1. MyISAM(MySQL的默认引擎. 每个MyI ...

  7. 格式化JSON数据

    function formatJson(json, options) { var reg = null, formatted = '', pad = 0, PADDING = ' '; options ...

  8. Linux 绝对路径与相对路径

    根据文件名写法的不同,可将所谓的路径(path)定义为绝对路径(absolute)和相对路径(relative). 绝对路径:由根目录(/)开始写起的文件名或目录名称. 相对路径:相对于当前路径的文件 ...

  9. 【Bootstrap】 bootstrap-table表格组件

    [Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...

  10. java设计模式------工厂设计模式

    总结 以上就是工厂模式的基本实现和详细说明.包括了简单工厂模式.工厂方法模式.抽象工厂模式.我们可以基于需求来选择合适的工厂模式 基本概念:为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来 ...