點擊穿透
touch 事件結束后會默認觸發元素的 click 事件，如沒有設置完美視口，則事件觸發的時間間隔為 300ms 左右，如設置完美視口則時間間隔為 30ms 左右（備注：具體的時間也看設備的特性）。
如果 touch 事件隱藏了元素，則 click 動作將作用到新的元素上，觸發新元素的 click 事件或頁面跳轉，此現象稱為點擊穿透
解決方法一
阻止默認行為
//阻止默認行為
node.addEventListener('touchstart', function(e){
console.log('hello')
e.preventDefault();
})
解決方法二
使背后元素不具備click特性，用touchXxxx代替click
banner_img.addEventListener('touchstart',()=>{
locationbar.href('https://www.baidu.com')
})
解決方案三
讓背后的元素暫時失去click事件，300毫秒左右再復原
#anode{
pointer-events: none;
}
btn.addEventListener('touchstart',(event)=>{
shade.style.display = 'none'
setTimeout(()=>{
anode.style.pointerEvents = 'auto'
},500)
})
解決方案四
讓隱藏的元素延遲300毫秒左右再隱藏
btn.addEventListener('touchstart',(event)=>{
setTimeout(()=>{
shade.style.display = 'none'
},300)
})
關於頁面跳轉的選擇
移動端頁面跳轉可以使用 a 鏈接，也可以使用 touchstart 事件來觸發 JS 代碼完成跳轉
-
效率上，touchstart 速度更快
-
SEO 優化上， a 鏈接效果更好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } #demo { width: 100%; height: 200px; background-color: pink; } </style> </head> <body> <div id="demo"></div> <script> let time demo.addEventListener('touchstart', function() { console.log('手指觸摸屏幕了') time = +new Date() }) demo.addEventListener('click', function() { console.log('點擊了') console.log(new Date() - time) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body, #app { width: 100%; height: 100%; } #app { position: relative; } #banner { width: 100%; height: 200px; background-color: orange; } #shade { position: absolute; text-align: center; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(1, 1, 1, 0.5); } h1 { margin-top: 100px; } /* a { pointer-events: none; */ /* } */ </style> </head> <body> <div id="app"> <a href="https://www.baidu.com" id="a"> <div id="banner"></div> </a> <div id="shade"> <h1>恭喜，一等獎</h1> <button id="btn">點擊關閉</button> </div> </div> <script type="text/javascript"> const btn = document.getElementById('btn') const shade = document.getElementById('shade') btn.addEventListener('touchstart', e => { setTimeout(() => { shade.style.display = 'none' }, 500) // e.preventDefault() // setTimeout(() => { // a.style.pointerEvents = 'auto' // }, 500) }) // banner.addEventListener('touchstart', function() { // window.location.href = 'https://www.baidu.com' // }) </script> </body> </html>