tap穿透之zepto的bug

时间：2022-02-10 04:52:39

一、什么是zepto tap事件穿透？
tap事件穿透就是，页面和弹框上都有绑定点击事件，最上层的弹框绑定了tap事件，下层的页面绑定了click事件，在执行完上层事件后会紧接着触发下层事件，进而出现事件穿透。
二、为什么会出现tap穿透？
因为tap和click都执行了。原理是，点击元素后，tap事件需要冒泡到document上才会触发，而在冒泡到document之前，手指接触和离开屏幕(touchstart/touchend)是会触发click事件的。因为click事件是延迟触发，所以tap事件先执行，待到300ms后，便会触发弹框下方元素的点击事件。如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话，就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)时，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。
touchend，tap，click。
三、怎么解决tap穿透？
1、只用touch事件
这是最简单的解决方案，可以完美解决点击穿透问题。
把页面内所有click全部换成touch事件(touchstart 、touchend、tap)， a标签的href也是click，需要去掉换成js控制的跳转。
2、延迟执行事件

$("#closePopup").on("tap", function (event) {
  setTimeout(function(){
      $('#popupLayer').hide();
      $('#bgMask').hide();
  },320);
});

这种方法其实很好，可以和fadeInIn/fadeOut等动画结合使用，做出过度效果。
3、fastclick
使用fastclick库，其实现思路是，取消click事件，用touchend模拟快速点击行为。

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

4、只用click事件
会带来300ms延迟。
5、pointer-events
比较麻烦且有缺陷，不建议使用。
mask隐藏后，给按钮下面元素添加pointer-events: none;样式，350ms后去掉这个样式，恢复响应。缺陷是350ms内，点击元素没反应。

$('#closePopup').on('tap', function(e){
  $('#popupLayer').hide();
  $('#bgMask').hide();
  $('#underLayer').css('pointer-events', 'none');
  setTimeout(function(){
    $('#underLayer').css('pointer-events', 'auto');
  }, 400);
});

6、监听touchend事件，并在事件中使用preventDefault()阻止冒泡，不是所有的浏览器都支持。

$('#closePopup').on("touchend", function(e){  //这里使用touchstart事件也可以
  e.preventDefault();
  $('#popupLayer').hide();
  $('#bgMask').hide();
});

四、Fastclick的Bug
1、事件穿透两个页面
问题描述：如果使用Fastclick解决300ms延迟问题，在安卓4.2下的webview中会引发一个比较奇怪的bug。在A页面中有个a button，在B页面中有个b button，a和b都在同一个position，给a和b都绑定一个click事件。a的click事件触发后跳转到B页面，你会发现b的click事件也被触发了？？？
问题分析：出现了两次click，第1次是fastclick中的模拟事件，第2次是延迟了300ms的点击事件。
解决方案：前300ms，用一个透明的div去覆盖每个页面，那么第2个click就点不到对应的button了。
2、下拉框闪退
问题描述：在iphone上，轻触select的时候，select会出现闪退。
解决方案：修改Fastclick的源码，判断点击目标的类型，如果是select，就return false。
3、日期控件无法触发
问题描述：正常点击时，无法触发日期控件，长按500ms，才可以触发。
解决方案：修改Fastclick的源码，当touchend的时候，判断点击目标的类型，如果是date，就直接return false。

FastClick.prototype.onTouchEnd = function(event) {
　if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "date"){
　　return false;
}

4、trigger触发click失效
问题描述：在iphone上，trigger("click")失效;
解决方案：修改Fastclick的源码，写个扩展。

var notNeed = FastClick.notNeeded(document.body);
$.fn.triggerFastClick=function(){
  this.trigger("click");
  if(!notNeed){
      this.trigger("click");
  }
}

需要用到模拟点击事件的时候，就使用$("#btn").triggerFastClick()来代替原来的trigger("click");

相关文章