移动端的click点透问题
在移动端开发中,有时会出现click点透的问题。
一、什么是click点透
以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C。
tips:以下举例仅针对webkit内核浏览器,所有效果需要在移动端进行查看(PC端不支持touch事件)。
具体html代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端点透问题</title>
<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="www.baidu.com">www.baidu.com</a>
</div>
<div id="console"></div>
</body>
</html>
在“移动端”,点击事件通常采用touch相关事件来获取高效率。现有需求, 点击遮盖层A则隐藏A(点击后隐藏,这一点很重要) ,则相关javascript代码如下:
var div1 = document.getElementByIdx_x("div1");
var div2 = document.getElementByIdx_x('div2');
var con = document.getElementByIdx_x('console');
function handle(e){var tar = e.target,
eve = e.type;
var ele = document.createElement_x("p");
ele.innerHTML = "target:"+ tar.id + " event:" + eve ;
con.appendChild(ele);
if(tar.id === "div1"){
div1.style.display = "none";
}
}
div1.addEventListener("touchend",handle);
div1.addEventListener("touchstart",handle);
这段简单的代码在 C区域外点击时是没有任何问题的,页面下方的log记录控制台内会出现如下内容:
target:div1 event:touchstart
target:div2 event:touchend
然而,当在C区域进行点击罩层A的时候,会发现跳到百度页面了,也就是,本来点击A,但是却透过A,点击到了B里的链接!这就是传说中的 click点透 。
为了更清楚的看到这个过程,我们为B绑定click事件,即如果B触发了click事件,那么说明,在A上的点击最终点到了B上。在上面javascript清单上添加一行代码如下:
div2.addEventListener('click',handle);
点击B区域,可以看到页面下方的log记录控制台内出现如下内容:
target:div1 event:touchstart
target:div1 event:touchend
target:div2 event:click
可见,在div1的事件触发完毕后,div2也就是B区域神奇的捕获到了click事件,而事实上我们只点击了div1。
二、点透出现的场景
刚才举例说明了什么是点透,其实点透的出现场景可以总结如下:
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。(这一点很重要)
3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件。
在以上情况下,点击A/B重叠的部分,就会出现点透的现象。
二、为什么会出现点透
click延迟,延迟,还是延迟。
在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchstart与click的区别如下:
.touchstart:在这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发
2.click:在这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值),且在这个在这个dom上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发
也就是说,事件的触发时间按由早到晚排列为:touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的,这个时间大概在300ms左右。
由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发时候,能够被点击的元素则是其下的B元素,根据click事件的触发规则:
只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件。
由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。
三、解决方案
1.对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。
2.对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件,从而阻止click事件的产生。即应在上例的 handle函数中添加 代码如下:
if(eve == "touchsend") e.preventDefault();
3.对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。
四、现有解决方案框架(库)
1. 众所周知,zepto的tap事件是有点透问题的,但是最新版的zepto已经修复了这个问题。
2. 在zepto修复问题之前,有fastclick、hammer等通用库可以使用。
转载自:http://www.tuicool.com/articles/q2YnUza
移动端的click点透问题的更多相关文章
- 移动端click点透bug
移动端click点透bug click点透bug有一个特定的产生情况: 当上层元素是tap事件,且tap后消失,下层元素是click事件.这个时候,tap上层元素的时候就会触发下层元素的click事件 ...
- web移动前端的click点透问题
在移动端开发中,有时会出现click点透的问题. 一.什么是click点透 以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C. tips:以下举例仅针对webkit内核浏览器,所有 ...
- 移动端的click
移动端的click 移动端click和touch的关系 搬运 http://segmentfault.com/q/1010000000691822 手指在屏幕上滑动时 各个touch的触发顺序 tou ...
- 彻底理解和解决移动WEB开发中CLICK点透问题
在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...
- 移动端的click事件延迟触发的原理是什么?如何解决这个问题?
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
- 【原】移动端vue页面点透事件 - 分析与解决
近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...
- 关于移动端的Click事件
在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...
- 移动端300ms与点透总结
300ms,主要发生在mobile 为啥会出现300ms延迟现象 浏览器想知道用户是否dobule tap(双击缩放) 下列情况不会出现300ms延迟 桌面浏览器 meta的viewport设置了us ...
- 移动端APP列表点透事件处理方法
关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章. 这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题.出现这个问题的来由是因为在转场的时候,各个手机的转场效果不一样 ...
随机推荐
- leetCode编程题
已知链表1->2->3->4,先需要删除3这个节点,请完成函数.注意,这里只给定要删除的节点3,并不知道3之前的节点是哪个,以及整个链表是什么节点. void delete(List ...
- javaSE阶段中 关于Sring类方法的应用
String类中有很多常用的方法,今天就一些方法涉及到的一些常见题 做两个小Demo 其中一个要求如下: 获取指定字符串中,大写字母.小写字母.数字 的个数 题目分析 * 为了统计大写字母.小写字 ...
- Ubuntu学习小结(一) 基础知识,系统安装,软件安装,解压缩
这段时间,抽空研究了一下Ubuntu,虽然也有过到目前为止使用计算机最作死的经历,但目前已经学会了一些最基本的操作.在这里简单的记录一下,算是吸取的教训,供其他人借鉴. 1.装Ubuntu系统.装Ub ...
- Javascript-DOM笔记
参考 javascript原生dom操作方法 JavaScript原生的dom操作方法 第一类:节点查找相关方法和属性 document/父节点.getElementById()document/父节 ...
- java 文件的读写操作
java 文件的读写操作 一.读: public String getSetting() { HttpServletRequest request=org.apache.struts2.Servle ...
- binder学习笔记(十)—— 穿越到驱动层
Binder驱动层的代码在kernel/goldfish/drivers/staging/android下的binder.c和binder.h.Android源码是不带Linux内核的,驱动正是在这个 ...
- 写一个Android输入法02——候选窗、转换
上一篇介绍了完成Android输入法的最小化步骤,它只能将按键对应的字符上屏.一般的东亚语言都有一个转换的过程,比如汉语输入拼音,需要由拼音转成汉字再上屏.本文将在前文基础上加入完成转换过程所必需的候 ...
- MySQL数据库之插入显示图片
图书馆系统项目需要用到好多图片,并且要求存入到数据库中,对这个特别感兴趣,于是上网查了资料,采用C#语言,进行了具体实现. 说明: 功能:往MySQL数据库插入并显示图片: 验证:执行插入功能后,我把 ...
- GuavaCache简介(一)
原文地址 http://blog.csdn.net/guozebo/article/details/51590517 前言 在多线程高并发场景中往往是离不开cache的,需要根据不同的应用场景来需要选 ...
- springboot添加第三方的jar或本地jar
原文链接:https://www.cnblogs.com/fengli9998/p/8044923.html 由对接支付引入第三方的jar时冒出的问题,如何在springboot项目中来引入第三方的j ...