移动端点透问题
原因
文章引用于 http://www.tuicool.com/articles/q2YnUza
touchstart,touchend,touchmove 延时 比 click 短
具体解释
1.touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发
2.click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发
如图
红色div(以后称为A)
黄色div(以后称为b)
a链接(称为C)
具体问题
在B上 触发 了 A 的 touch 事件 结果 触发了B 的 onclick事件
如果 在C上 触发了A 的 touch 事件 触发了 B的 onclick a链接的默认click 事件
点透出现的场景
- A/B两个层上下z轴重叠。
- 层的A点击后消失或移开。（这一点很重要）
- B元素本身有默认click事件（如a标签） 或 B绑定了click事件。
解决方法
- 1.对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。
- 2.对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件，从而阻止click事件的产生。即应在上例的 handle函数中添加 代码如下：if(eve == "touchsend") e.preventDefault();
- 3.对于遮盖浮层，由于遮盖浮层的点击即使有小延迟也是没有关系的，反而会有疑似更好的用户体验，所以这种情况，可以针对遮盖浮层自己采用click事件，这样就不会出现点透问题。
附上源码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端点透问题</title>
<style>
*{
margin: 0px;
padding:0px;
}
#div1{ /*红色半透明遮盖层A*/
width: 300px;
height: 300px;
background-color: rgba(255,0,0,0.25);
}
#div2{ /*黄色内容层B*/
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>
<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById('div2');
var con = document.getElementById('console');
var i = 1;
function handle(e){
i ++;
var tar = e.target,
eve = e.type;
if(eve == "touchsend") e.preventDefault();
var ele = document.createElement("p");
ele.innerHTML = "target:"+ tar.id + " event:" + eve + i;
con.appendChild(ele);
if(tar.id === "div1"){
div1.style.display = "none";
}
}
div1.addEventListener("touchstart",handle);
// div1.addEventListener("click",handle);
div2.addEventListener('click',handle);
</script>
</body>
</html>
