<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ position: absolute; left:0; top:0; width:200px; height:200px; background:red; opacity:.2; } </style> </head> <body> <a href="https://www.baidu.com">百度</a> <div id="box"></div> < Script > { / * touchstart finger pressed on the lower element touchmove finger element after the press, the screen moves touchend finger element after the press and lift * / the let Box = document.querySelector ( " #box " ) ; box.addEventListener ( " touchEnd " , () => { box.style.display = " none " ; e.preventDefault (); }); / * mobile terminal, in the end not to support mouse events? End mobile mouse event question: about 300ms delay When we touch the finger element in the mobile terminal, it will be immediately executed our touch event, and will record the coordinates of the current trigger event after 300 milliseconds find elements in the coordinates, if the element has a corresponding mouse event on the implementation of the event points through solution: 1. Do not use the mouse events mobile terminal (including a of the href) 2. stop the default event * / } </ Script > </ body > </ HTML >