Zepto Click点透情况解决办法

“点透”是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件（或打开链接）。这个被定义为这是一个“点透”现象。

在前面的项目中遇到了如下图的问题：在点击弹出来的选择组件的右上角完成后会让完成后面的input输入框聚焦，弹出输入键盘，也就是点透了

一、如何发生

点透事件据我的理解，就是因为Zepto在Click事件上有300毫秒的延迟，为了跟其他各种各样的乱七八糟的东西兼容。但是很不凑巧，我们是在一个模态弹出框上绑定了这样一个延迟300ms的点击事件，点击事件又会被冒泡到最下层，而最下层刚好是一个输入框。这样事件就会被这个输入框给捕捉，导致最上层事件无法触发（具体更深层次原因未知，只是知道不能被触发）。

二、解决办法

最简单，是实用，又不用增加其他代码量的方法就是将Click点击事件替换成touchend事件替换。例如：

$("#save_and_back").on("touchend",function(e){
           save_article(article_data).then(function(res){
              location.href = "home.html";        });        e.preventDefault();    }); 
 
  1 
  2 
  3 
  4 
  5 
  6 
  
 
  1 
  2 
  3 
  4 
  5 
  6

这样子就在移动端上很完美地解决了，没有了点透情况。但是，尼玛，PC端上又不兼容了。
突发奇想下，能不能同时绑定click和touchend事件，这样是不是就完美的解决了。

$("#save_and_back").on("touchend",function(e){
           save_article(article_data).then(function(res){
              location.href = "home.html";        });        e.preventDefault();    });    $("#save_and_back").on("click",function(e){
           save_article(article_data).then(function(res){
              location.href = "home.html";        });        e.preventDefault();    }); 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12

果然，真的解决了问题。查询一下原因：
事件优先级为： touchstart > touchend > click 。
在PC端上，没有touchend事件，只有click事件被绑定上了。

在移动端上，绑定了touchend和click事件，但是touchend事件优先级比click高，并且阻止了事件继续冒泡。所以两个端上都能完美实现效果，具体还有没有其他的问题暂时不得而知。

3、点透的解决方法：

方案一：来得很直接github上有个fastclick可以完美解决

引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

1 window.addEventListener( "load", function() {2     FastClick.attach( document.body );3 }, false );

或者有zepto或者jqm的js里面加上

1 $(function() {2     FastClick.attach(document.body);3 });

当然require的话就这样：

1 var FastClick = require(‘fastclick‘);2 FastClick.attach(document.body, options);

方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

1 $("#cbFinish").on("touchend", function (event) {2     //很多处理比如隐藏什么的3     event.preventDefault();4 });

方案三：延迟一定的时间(300ms+)来处理事件

1 $("#cbFinish").on("tap", function (event) {2     setTimeout(function(){3     //很多处理比如隐藏什么的4     },320);5 });

这种方法其实很好，可以和fadeInIn/fadeOut等动画结合使用，可以做出过度效果

理论上上面的方法可以完美的解决tap的点透问题，如果真的倔强到不行，用click

转载地址：http://fhhni.baihongyu.com/

你可能感兴趣的文章