记录一个臭名昭著的问题-事件点透

我们先来看一个点击遮罩时，让遮罩隐藏的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件点透</title>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <style type="text/css">
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 150px;
            height: 150px;
            background: red;
            opacity: .5;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com">打开百度</a>
    <div id="box"></div>
    <script type="text/javascript">
        (function () {
            var box = document.querySelector('#box');
            box.addEventListener('touchstart', function (e) {
                this.style.display = "none";
                // e.preventDefault();
            });
        })();
    </script>
</body>

</html>

在点击打开百度上面链接的遮罩时，让遮罩隐藏，但是却触发了a链接，直接跳转到百度首页了。这就是事件点透。点击a链接其实会默认触发click事件,而click事件也是mouse事件的一种比如

<a href="javascript:alert(1);">点击</a>

在移动端我们触碰一个元素时，会立即执行，添加在元素上的touch事件，记录坐标，然后在这个元素上查找是否有mouse事件，如果有mouse事件,在300毫秒之后(mouse事件都会有300毫秒延迟)就会执行这个mouse事件，这就是事件点透那怎么解决事件点透的问题呢？阻止默认事件！！！ e.preventDefault(); 但是移动端中阻止默认事件之后又会引发其他的一些问题，这个在之后的文章中再详细记录吧。