移动端300ms与点透总结
300ms,主要发生在mobile
- 为啥会出现300ms延迟现象
- 浏览器想知道用户是否dobule tap(双击缩放)
- 下列情况不会出现300ms延迟
- 桌面浏览器
- meta的viewport设置了
user-scalable=no
(禁止缩放) - meta的viewport设置了
width
或者initial-scale
- IE11+,设置了
touch-action: manipulation;
.For IE10 use-ms-touch-action: manipulation;
移动端点透
发生情况:
- A,B两个层上下重叠在Z轴中
- 绑定
touchstart/touchend
事件,使上层的A点击后消失 - B默认有click事件或B绑定了click事件
为什么会产生点透:
- 移动端事件执行顺序:
touchstart -> touchend -> click
解决方案:
- 尽量用touch事件替换click事件
- 阻止a标签的click的情况:在消失元素的
touchstart/touchend
事件,调用event.preventDefault
或者event.returnValue = false
- A和B都用
click
事件做绑定 - 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与点透总结的更多相关文章
- 移动端300ms延迟问题和点击穿透问题
一.移动端300ms延迟问题: 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会 ...
- 移动端300ms的点击延迟以及解决方案
[今天做在移动端的一些效果时,我选择使用动画而不是用过渡,这个300ms的点击延迟是我为什么使用动画而不使用过渡最主要的一个原因] 动画和过渡 共同点:都是css控制DOM运动, 不同点: 1.过渡: ...
- 移动端300ms兼容问题(移动端经典问题)
移动端300ms延迟原因 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌 ...
- 【原】移动端vue页面点透事件 - 分析与解决
近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...
- 移动端300ms点击事件的延迟
移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...
- 移动端300ms点击延迟
移动端300ms点击延迟 原因:早期的苹果手机存在点击缩放,用手指在屏幕上快速双击后,iOS自带的Safari浏览器会将网页缩放至原始比例,后来很多浏览器也跟着学了. 解决方法:禁止缩放 <me ...
- touch-action 解决移动端300ms延迟问题
CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, ...
- 解决移动端300ms延迟fastclick
为什么要使用fastclick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了fastclick. f ...
- 移动端APP列表点透事件处理方法
关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章. 这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题.出现这个问题的来由是因为在转场的时候,各个手机的转场效果不一样 ...
随机推荐
- Pluto - iOS 上一个高性能的排版渲染引擎
WeTest 导读 Pluto 是 iOS 上的一个排版渲染引擎,通过 JSON/JS 文件可以很方便地描述界面元素,开发效率很高,并且在流畅度,内存等方便有保证.pluto.oa.com 上有更多详 ...
- 深入理解Java虚拟机类加载机制
1.类加载时机 对于类加载的第一个阶段---加载,虚拟机没有强制的约束,但是对于初始化阶段,虚拟机强制规定有且只有以下的5中情况必须开始初始化,当然,加载.验证.准备阶段在初始化前就已经开始. ①使用 ...
- linux 目录详解
/bin bin是binary的缩写.这个目录沿袭了UNIX系统的结构,存放着使用者最经常使用的命令.例如cp.ls.cat,等等. /boot 这里存放的是启动Linux时使用的一些核心文件. /d ...
- TCHAR字符串查找&反向查找字符串
C++支持两种字符串,即常规的ANSI编码("字符串")和Unicode编码(L"字符串"),相应的就有两套字符串处理函数,比如:strlen和wcslen,分 ...
- JDK1.8源码(四)——java.util.Arrays 类
java.util.Arrays 类是 JDK 提供的一个工具类,用来处理数组的各种方法,而且每个方法基本上都是静态方法,能直接通过类名Arrays调用. 1.asList public static ...
- 记录一则ASM实例阻塞,rbal进程异常的案例
1.故障现象描述 2.确认故障现象 3.排查ASM层面 4.解决问题 1.故障现象描述 环境:AIX 7.1 + Standalone Oracle 11.2.0.4 现象:客户反映某11g版本的AD ...
- 理解HDFS
综述 当数据集的大小超过一台独立的物理计算机的存储能力时,就有必要对它进行分区并存储到若干台单独的计算机上.HDFS是hadoop的主要分布式存储系统,一个HDFS集群主要包括NameNode用来管理 ...
- JVM学习八:常用JVM配置参数
前面学习的都是和类加载相关的知识,接下来学习的则和GC相关的知识,都是JVM的几个重点块. 零.在IDE的后台打印GC日志: 既然学习JVM,阅读GC日志是处理Java虚拟机内存问题的基础技能,它只是 ...
- SQL中哪些情况会引起全表扫描
1.模糊查询效率很低:原因:like本身效率就比较低,应该尽量避免查询条件使用like:对于like '%...%'(全模糊)这样的条件,是无法使用索引的,全表扫描自然效率很低:另外,由于匹配算法的关 ...
- 移动端H5地图离线瓦片方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和流量耗费是移动开发必须考虑的两个点.常规的瓦片展 ...