Let’s first look at an example of making the mask hide when you click on it

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

<head>
    <meta charset="UTF-8">
    <title>The event points through</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">Open the baidu</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>
Copy the code

Click open baidu link mask, let mask hidden, but triggered a link, directly jump to baidu home page. This is event spotting. Clicking on the A link actually triggers a click event by default, which is a type of mouse event for example

<a href="javascript:alert(1);">Click on the</a>
Copy the code

On the mobile side, when we touch an element, we execute immediately, add a touch event to the element, record the coordinates, and then look for a Mouse event on that element, and if there is a mouse event, then after 300 milliseconds (all mouse events have a 300 millisecond delay) the mouse event is executed. So that’s event dotting so how do you solve the problem of event dotting? Block default events!! e.preventDefault(); However, blocking default events on mobile can cause other problems, which will be covered in more detail in a future article.