<!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 手指在元素上摁下 touchmove 手指在元素摁下之后，在屏幕中移动 touchend 手指在元素摁下之后，然后抬起 */ let box=document.querySelector("#box"); box.addEventListener("touchend",()=>{ box.style.display="none"; e.preventDefault(); }); /* 移动端中，到底支不支持鼠标事件？ 移动端鼠标事件问题：300ms左右的延迟 当我们在移动端手指触碰元素之后，会立即执行我们的touch事件，然后会记录当前触发事件的坐标 300毫秒之后，在该坐标查找元素，如果该元素有对应的鼠标事件，就执行 事件点透解决方案: 1.在移动端 不要使用鼠标事件 （包括a的href） 2.阻止默认事件 */ } </script> </body> </html>