当前位置：网站首页>Mobile terminal click penetration

Mobile terminal click penetration

2022-06-27 15:55:00 【Xiaobai, a vegetable seller】

One 、 Preface
We learned in the last blog that there is a delay problem in the click event on the mobile terminal , We can take some measures , To solve 300ms Delay problem . Now let's think about ,click The event has a delay 300ms problem , We use... On the mobile end touchstart Can't we solve this problem by listening to events ?
The mobile end touchstart The incident also has some drawbacks ：
1、 If we want to swipe the phone screen , But at this time, the mobile phone will also be touched , triggering touchstart event
2.、touchstart The event has a click through problem .
Two 、 What is click through
If we have two elements A,B, This element B Element in A The upper , We listen to elements B Of touchstart event , When an event is triggered , We will B To hide . Then the element A It will trigger click event , If the element A For a link , The element A Will realize the jump . as a result of ： When trigger element B Of touchstart When an event is , The process of triggering an event is :touchstart > touchend > click, This element B disappear , The browser will be in 300ms After the click Events are dispatched to elements in the same location . If at this point the element A Element in B Trigger touchstart In the same position as , The element... Is triggered A Of click event .

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="user-scalable"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    
    .box1 {
    
      width: 100%;
      height: 500px;
      background-color: red;
    }
    .box2 {
    
      width:100%;
      height: 200px;
      background-color: green;
      position: absolute;
      z-index: 1111;
      top: 0px;
    }

  </style>
  <title>Document</title>
</head>
<body>
  
  <div class="box1">
    <a href="https://www.baidu.com"> use Baidu Search   You will know </a>
    <div class="box2"></div>
    
  </div>
  
  <script>

    const box1 = document.querySelector(".box1")
    const box2 = document.querySelector(".box2")
    box2.addEventListener("touchstart", (e) => {
    
      console.log(" Trigger box2 Ha ha ha ha ")
      box2.style.display = "none"
    })

    box1.addEventListener("click", () => {
    
      console.log(" Trigger box1 Hahaha ")
    })
  </script>

</body>
</html>

3、 ... and 、 Browser event trigger sequence

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
    
      margin: 0px;
      padding: 0px;
    }
    #app {
    
      width: 100%;
      height: 100px;
      background-color: red;
    }
  </style>
  <title>Document</title>
</head>

<body>

  <div id="app"></div>

  <script>

    const app = document.querySelector("#app")
    app.addEventListener("touchstart", () => {
    
      console.log(" Trigger touchstart event ")
    })
    app.addEventListener("mouseover", () => {
    
      console.log(" Trigger mouseover event ")
    }) 
    app.addEventListener("mousemove", () => {
    
      console.log(" Trigger mousemove event ")
    })
    app.addEventListener("mousedown", () => {
    
      console.log(" Trigger mousedown event ")
    })
    app.addEventListener("mouseup", () => {
    
      console.log(" Trigger mouseup event ")
    })
    app.addEventListener("touchmove", () => {
    
      console.log(" Trigger touchmove event ")
    })
    app.addEventListener("touchend", () => {
    
      console.log(" Trigger touchend event ")
    })
    app.addEventListener("click", () => {
    
      console.log(" Trigger click event ")
    })
  </script>

</body>

</html>

Insert picture description here

The above is the sequence of events in the browser I tested , At this time, the order is ：
touchstart > touchend > mouseover > mousemove > mousedown > mouseup > click
touchstart > touchmove > touchend

event	describe	trigger
touchstart	Start touching	The finger touch screen immediately triggers
touchmove	Move or drag	Depending on the system and browser
touchend	End of touch	Finger leaving triggers immediately

Four 、 What happened
1、 Click through question
Trigger... Under the mask touchstart Method , Disappearance of mask , Trigger... In this position click event .
2、 Cross page click through question
Consistent with the above principle , There is one below a link , When the upper layer is triggered touchstart Method , Will trigger the same position click event , If a The link is below the current trigger position , Page Jump will be triggered .
5、 ... and 、 Solution
1、 Will all click All events are changed to touch event
Because some a The link uses click event , At this time, you can use the touchend and span The label is used in combination with .
Insert picture description here
2、 Don't use touch event , Use only click event
Only... Is used in the mobile browser click Events can cause 300ms The problem of delay , If our interactivity is not high, we can use , But still not recommended .
3、 Block default events

4、 introduce fastclick.js
Insert picture description here