1. 穿透问题可这么理解, 共有2种问题:
问题1: 有A 和 B 两个弹层,B 弹层盖在A 弹层上面,B 弹层绑定 touchend 事件,当用户点击B 的时候 B隐藏,由于touchend 事件触发的太快了,导致用户点击到弹层下面的具有click 属性的元素的东东。(包括 A 标签<a href='#'></a> 或 input 框 或 绑定了 click 事件的元素)奇怪的是, 若给链接A 绑定了touchend 并且e.preventDefault() 也是不起作用。请看下面的例子,也就是它根本没有执行 touchend 事件,但是却执行了A 元素的 href 跳转链接。
浏览器表现 :
ios 8.4 safari 页面不跳转 ios 8.4 UC 10.6.5.627 跳转 ios 7.0 safari 跳转 ios 7.0 UC 10.6.5.627 跳转 SAMSUNG GT-19308 4.3 UC 10.6.5.627 跳转 SAMSUNG GT-19308 4.3 跳转。 若直接点击链接 a,竟然会跳转,e.preventDefault() 竟然没作用,只有这个浏览器会。想点击 a 链接不跳转,只能绑定 click 事件并且 e.preventDefault();
问题2:有A 和 B两个元素,B 元素盖在A 元素上面,B元素默认隐藏。A元素绑定事件让B 元素显示出来,B元素点击自己隐藏。出现的现象是: 点击A元素 B元素显示不出,因为触发了B元素里的代码。
A.on('touchend', function(){ B.show();});// 就算B 元素用 touchend 绑定, 有的手机也还是会触发 B.hide();B.on('click', function(){ B.hide();});
解决穿透问题1:
各个浏览器的表现
iOS 8.4 safari用touchend 关闭 不会穿透下面绑定的 click 事件, 所以什么事都不用做,很完美。 iOS 8.4 和 iOS 7.0 UC浏览器弹窗关闭用 setTimeout(function(){ 弹层.hide() }, 0); 可以解决弹层穿透。 另外备注下: UC 浏览器做过优化,下面的代码 click 事件比 touchend的触发的快。$('.m').on('touchend', function(){ setTimeout(function(){ console.log('touchend'); }, 0);});$('.m').click(function(){ console.log('click');});
iOS 7.0 safari的不行,只能用 e.preventDefault() 解决 或者设置 setTimeout(.. 360),而 e.preventDefault() 也支持 ios8.4 safari和UC版本的。
Android 的手机 4.1.1 JRO03L MIUI-JLB14.0, e.preventDefault();不能解决,但是 setTiemout 只要在 >=300 就可以解决了。
所以最终的解决办法:
由于 iOS 7.0上 setTimeout 360毫秒 的时间太长了,所以直接给 B弹层绑定 e.preventDefault();
B.on('touchend', function(e){ e.preventDefault(); B.hide();});
Android上解决方式通过属性 pointer-events: none; 让整个页面都不能有点击的属性, 301秒以后恢复属性值。
B.on('touchend', function(){ $('html').css({ pointer-events: 'none' }); setTimeout(function(){ $('html').css({ pointer-events: 'auto' }); }, 301); B.hide();});
解决穿透问题2:
解决方式比较简单, A 里面用 e.preventDefault(), 注意A也不能绑定tap; B 绑定 touchend
A.on('touchend', function(e){ e.preventDefault(); B.show();});B.on('touchend', function(){ B.hide();});
2. 当给一个元素绑定 touchend 事件和click事件, touchend事件让元素关闭,那么都不会触发到 click 事件,浏览器如下。
SAMSUNG GT-19308 4.3 原生浏览器 和 UC浏览器 10.6.5.627 IOS7.0 safari 和 UC浏览器 10.6.5.627 IOS8.4 safari 和 UC浏览器 10.6.5.627
3. fastClick
通过绑定 body touchend,然后通过逻辑找到 e.target 元素,满足条件下执行 e.preventDefault(); 阻止了 click事件,然后让 initMouseEvent 和 dispatchEvent 来触发。
问题1的是否解决 的浏览器兼容如下:
SAMSUNG GT-19308 4.3 和 ios8.4
原生浏览器和safari 可以 UC浏览器都 可以ios7.0 safri 和 UC浏览器 都不可以
4. 注意:若给 html 根元素绑定了
$('html').on('touchend', function(){ e.preventDefault(); })则页面里所有的元素 click 绑定的事件都触发不了, input 都不能点击输入了。