原文链接 http://ymblog.net/2016/03/28/由移动端页面点击穿透想到的/
首先我想到了哪些：
- 点击穿透是如何引起的
- 如何解决
- 什么是事件模拟
一、点击穿透是如何引起的？
可能是由click事件的延迟或者事件冒泡导致，事件包含touchstart/touchmove/touchend/mousedown/mousemove/mouseup/click。
造成点击穿透的原因是，在移动端页面中click的点击事件有200-300ms的延迟，为了体验更好我们使用了zepto的touch事件，或者说使用的touchstart/touchend事件，在执行完 touch事件之后，目标事件执行，此时 click 事件还在延迟的 300ms 之中。当 300ms 到来的时候，click 到的其实是隐藏元素下方的元素。
如果正下方的元素有绑定 click 事件，此时便会触发，如果没有绑定 click 事件的话就当没发生。如果正下方的是 input 输入框（或是 select / radio / checkbox），点击默认 focus 而弹出输入键盘，也就出现了上面的“点透”现象。
那为什么要有延迟？浏览器在 touchend 后会等待约300ms，原因是判断用户是否有双击（double tap）行为。如果没有 tap 行为，则触发 click 事件，而双击过程中就不适合触发 click 事件了。由此可以看出 click 事件触发代表一轮触摸事件的结束。
DOM事件流：
1，事件捕获阶段；
2，处于目标阶段；
3，事件冒泡阶段。
说到这儿我们再来了解下事件的执行顺序，在移动端页面中，touch事件的执行顺序是touchstart ->touchmove -> touchend -> mousedown ->mouseup ->click，当然在web端中可能顺序又不一样。
那似乎上面说的穿透问题变得理所当然了。因为这是浏览器的默认行为！
二、如何解决
一般来说加上下面的代码就会解决问题了。
在touchend事件中阻止浏览器的默认行为，就可以了。
event.preventDefault();
上面的算是一种解决办法了，我记得还会有那种情况即使加了这行语句还是无效的更特殊的情况，有人说使用fastclick可以解决问题，当初我使用的时候发现确实好像点击快了很多，但是在华为荣耀3C的机型上却发现还是会出现点击穿透的现象，再考虑到为此我需要再引入一个文件的http的请求，所以果断放弃。
还有一种治标不治本的方式，如下：
由于 click 事件的滞后性，在这段时间内原来点击的元素消失了，于是便“穿透”了。因此我们顺着这个思路就想到，可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。
同样的道理，不用延时动画，我们还可以动态地在触摸位置生成一个透明的元素，这样当上层元素消失而延迟的click来到时，它点击到的是那个透明的元素，也不会“穿透”到底下。在一定的timeout后再将生成的透明元素移除。
$(‘#closePopup‘).on(‘tap‘, function(e){
$(‘#popupLayer‘).hide();
$(‘#bgMask‘).hide();
$(‘#underLayer‘).css(‘pointer-events‘, ‘none‘);
setTimeout(function(){
$(‘#underLayer‘).css(‘pointer-events‘, ‘auto‘);
}, 400);
});
但如果页面中的点击事件多了这样肯定不行的。
三、什么是事件模拟
zepto上的tap事件也是模拟出来的，我们似乎可以自己来模拟点击事件。
我们可以打印控制台打印的event对象，
所谓事件模拟就是通过特定的方法，传入指定的参数，然后派发这个自定义事件就可以了。
var event = document.createEvent(‘MouseEvents‘);
这个参数可选的有：
- UIEvents
- MouseEvents
- MutationEvents，一般化dom变动
- HTMLEvents一般dom事件
var type = ‘click‘; //要触发的事件类型 var bubbles = true; //事件是否可以冒泡 var cancelable = true; //事件是否可以阻止浏览器默认事件 var view = document.defaultView; //与事件关联的视图，该属性默认即可，不管 var detail = 0; var screenX = 0; var screenY = 0; var clientX = 0; var clientY = 0; var ctrlKey = false; //是否按下ctrl var altKey = false; //是否按下alt var shiftKey = false; var metaKey = false; var button = 0;//表示按下哪一个鼠标键 var relatedTarget = 0; //模拟mousemove或者out时候用到，与事件相关的对象 var event = document.createEvent(‘MouseEvents‘); event.initMouseEvent(type, bubbles, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);
最终的解决办法：
var el = null;
var list = document.getElementById(‘list‘);
function getEvent(el, e, type) {
e = e.changedTouches[0];
var event = document.createEvent(‘MouseEvents‘);
event.initMouseEvent(type, true, true, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
//event.forwardedTouchEvent = true;
return event;
}
list.addEventListener(‘touchstart‘, function (e) {
var firstTouch = e.touches[0]
el = firstTouch.target;
})
list.addEventListener(‘touchend‘, function (e) {
e.preventDefault();
var event = getEvent(el, e, ‘click‘);
el.dispatchEvent(event);
})
list.addEventListener(‘click‘, function (e) {
list.style.display = ‘none‘;
setTimeout(function () {
list.style.display = ‘‘;
}, 1000);
})
我们可以在touchend事件的时候阻止浏览器的默认行为，然后自己模拟事件的产生与触发。这就是自己创建一个click的Event对象触发之，所有的点击依然就用click。
四、总结
从早上看资料看到现在，刚开始思路还非常清晰，问题的来源，问题的产生等等以及该如何解决...看的时间久了，看的东西多了突然发现变得模糊了起来，发现很多东西都是冲突的，比如点击穿透是zepto引起的？看了下网友说的，由于zepto的模拟tap事件是冒泡到document才触发的，而在冒泡到 document 之前，手指接触和离开屏幕（touchstart / touchend）是会触发 click 事件的。所以就会有这个问题？那我阻止了浏览器的默认事件不就ok了？
但似乎又是说在安卓和iOS的区别在于mousedown的执行速度，安卓大于iOS
在android上获得的结果是惊人的，这个劳什子android里面moveover事件偶然比尼玛touchstart还快！！！
而ios压根就不理睬mouseover事件，这是主要问题产生原因！！！
而android在movedown时候，开开心心触发了input的focus事件，然后键盘就弹起来了！！！
所以针对android，我们还得将mousedown干掉才行！！！！
而事实上，我们input获取焦点，就是通过mousedown触发的，ios也是，所以要解决android下面的问题还得从其它层面抓起
这也就产生了最终的解决办法：也就是上面写的，上面的只是针对一个点击事件，下面则针对全部：
var touch = {};
var t = new Date().getTime();
document.addEventListener(‘click‘, function (event) {
if (event.myclick == true) {
return true;
}
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
event.propagationStopped = true;
}
event.stopPropagation();
event.preventDefault();
return true;
}, true);
document.addEventListener(‘touchstart‘, function (e) {
touch.startTime = e.timeStamp;
touch.el = e.target;
t = e.timeStamp;
});
document.addEventListener(‘touchmove‘, function (e) { });
document.addEventListener(‘touchend‘, function (e) {
touch.last = e.timeStamp;
var event = document.createEvent(‘Events‘);
event.initEvent(‘click‘, true, true, window, 1, e.changedTouches[0].screenX, e.changedTouches[0].screenY, e.changedTouches[0].clientX, e.changedTouches[0].clientY, false, false, false, false, 0, null);
event.myclick = true;
touch.el && touch.el.dispatchEvent(event);
return true;
});
dom.addEventListener(‘click‘, function (e) {
alert(1);
});
其核心是自己模拟事件并派发。
var event = document.createEvent(‘Events‘); event.initEvent(‘click‘, true, true, window, 1, e.changedTouches[0].screenX, e.changedTouches[0].screenY, e.changedTouches[0].clientX, e.changedTouches[0].clientY, false, false, false, false, 0, null); event.myclick = true; touch.el && touch.el.dispatchEvent(event);
五、参考
最先点开的这篇文章：https://segmentfault.com/q/1010000000691822
后来又点开了这篇文章：https://segmentfault.com/a/1190000003848737
然后在这篇文章的页脚又看到了很多，于是乎又查看了这篇：http://www.cnblogs.com/yexiaochai/p/3462657.html
然后又看了这篇：http://www.cnblogs.com/yexiaochai/p/3442220.html