点透现象出现的场景:
当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件。在这种情况下,点击A/B重叠的部分,就会出现点透的现象。
点透现象出现的原因:
zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,并且tap事件是冒泡到document上触发的!!!
在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchstart与click的区别如下:
touchstart:在这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发;
click:在这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动(某些<a href=”http://www.jd.com”>浏览器</a>允许移动一个非常小的位移值),且在这个DOM上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发
也就是说,在移动端事件的触发时间按由早到晚排列为:touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的,这个时间大概在300ms左右。
由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发时候,能够被点击的元素则是其下的B元素,根据click事件的触发规则:只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件。由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。
点透现象解决方案:
解决方案一:来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick
引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});
当然require的话就这样:
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);
解决方案二:
对于B元素本身存在默认click事件的情况,应及用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生。
$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。
解决方案三:延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果
解决方案四: 理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,改用click。特别是对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。
附上自己写的小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body,html{
width: 100%;
height: 100%;
}
.bodyDiv{
background: #f1f1f1;
width: 100%;
margin:0 auto;
height: 100%;
}
.inner{
background: #ccc;
width: 80%;
margin:0 auto;
}
.h1{
text-align: center;
}
.inner p{
font-size: 14px;
line-height: 26px;
}
.yc{
display: none;
}
</style>
<body>
<div class="bodyDiv">
<div class="inner">
<h1 class="h1">我做的简单测试</h1>
<p>关于文章的文字,Click点透情况解决办法一、如何发生点透事件据我的理解,就是因为Zepto在Click事件上有300毫秒的延迟,为了跟其他各种各样的乱七八糟的东西兼容。Click点透情况解决办法一、如何发生点透事件据我的理解,就是因为Zepto在Click事件上有300毫秒的延迟,为了跟其他各种各样的乱七八糟的东西兼容。Click点透情况解决办法一、如何发生点透事件据我的理解,就是因为Zepto在Click事件上有300毫秒的延迟,为了跟其他各种各样的乱七八糟的东西兼容。</p>
<button class="btn">点击我呀</button>
<div class="yc" style="width:500px;height:300px;border:1px solid #666;margin:0 auto;margin-top:20px;">
</div>
</div>
</div>
</body>
<!-- <script type="text/javascript" src="jquery-1.12.4.min.js"></script> -->
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="fastclick.js"></script>
<script>
$(function(){
new FastClick(document.body);
var sum=0;
$(".btn").on("click",function(){
sum++;
if (sum%2==1) {
$(".yc").css("display","block");
}else if(sum%2==0){
$(".yc").css("display","none");
}
})
})
</script>
</html>