tap穿透

一、什么是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");

时间: 2024-12-26 17:37:25

tap穿透的相关文章

Zepto tap 穿透bug

当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,解决方案: 1.使用github上有一个叫做fastclick的库: 2.监听touchend事件,并在事件中使用preventDefault()阻止冒泡: 3.使用css3的pointer-events=true,pointer-e

Zepto tap 穿透bug、解决移动端点击穿透问题

当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必"穿 透", 现象原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的 再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕

移动端tap穿透的问题

方案一:来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/fastclick 引入fastclick.js,因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上 1 window.addEventListener( "load", function() { 2 FastClick.attach( document.body ); 3 }, false ); 或者有zepto或者jqm的js里面加上 1 $(f

响应式基本知识

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小

移动web基本知识

1.pixel像素基础 1.px:csspixel 逻辑像素,浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定 注:为什么不使用默认的980px的布局viewport 原因: 宽度不可控制,不同的系统设备的默认值都可能不同 页面缩小版显示,交互性不友好 链接不可点 有缩放,缩放后又有滚动 例如font-size为40px等于pc上12px同等物理大小

第133天:移动端开发的一些总结

1. piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示?iphone5分辨率640*1136 逻辑像素与物理像素的关系px逻辑像素:浏览器使用的抽象单位dp,pt物理像素:设备无关像素dpr:设备像素缩放比计算公式:1px = (dpr)^2 * dpiphone5的 dpr = 2: DPI:打印机每英寸可以喷的墨汁点(印刷行业)PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度目前,在计算机显示设备参数描述上,二者意思一致计算公式:以iphone5为例:pp

第134天:移动web开发的一些总结(二)

1.响应式布局 开发一个页面,在所有的设备上都能够完美展示. 媒体查询:@media screen and (max-width:100px) { } 媒体类型:screen(屏幕) print(打印机)handheld(手持设备)all(通用) 常用媒体查询参数: width -- 视口宽高height -- 视口宽高device-width -- 设备的宽高device- height -- 设备的宽高orientation:检查设备处于横向(landscape)还是竖屏(portrait)

移动端交互优化

1.移动web页面上click事件响应有300ms延迟 原因:移动设备访问的web页面都是PC上的页面.在默认viewport(980px)的页面往往需要"双击"或"捏开"放大页面.而正是为了确认用户是"双击"还是"单击". safari 需要300ms 的延迟来判断.而后来的iphone,android也沿用这样的设计. 举例:如果你点击一下,在300ms内再点击第二次就认为是双击事件. 1.1) 如何解决? 利用tap事件

zepto的tap事件的穿透分析

首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取焦点). 原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手