根本原因：double click 雙擊
移動端默認雙擊情況下會有方法效果，當你點擊一次之后，移動端無法判斷你是否下一次還會繼續完成雙擊，因此存在300 ms 延遲
有一部分瀏覽器，比如chrome瀏覽器，當你在meta頭設定width=device-width時，它會自動禁止300 ms的延遲
推薦的解決方法：fastclick https://github.com/ftlabs/fastclick
原理：當檢測到touchend事件后，會觸發自己模擬的click事件
先測驗一下touchstart和click之間的時間差：
我用的chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移動端影片</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;} </style> </head> <body> <div class="box" id="box"></div> <script> var box=document.getElementById("box"), startTime=0; box.addEventListener("touchstart",function(){ startTime=Date.now();//獲取當前時間 console.log("touchstart"); },false); box.addEventListener("click",function(){ console.log("click"); console.log(Date.now()-startTime); },false); </script> </body> </html>
這個88ms的時間差延遲是可以接受的，說明chrome瀏覽器已經解決了這個問題
但是有部分瀏覽器比如安卓機上的還是會存在300ms延遲問題
解決方法：首先引入fastclick.js
<script src="https://www.cnblogs.com/chenyingying0/p/fastclick.js"></script>
然后添加這段代碼：
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
jQuery版需要用下面這段代碼：
$(function() { FastClick.attach(document.body); });
以下這幾種情況是不需要使用fastclick：
1、FastClick不會對PC瀏覽器添加監聽事件
2、Android版Chrome 32+瀏覽器，如果設定viewport meta的值為width=device-width，這種情況下瀏覽器會馬上出發點擊事件，不會延遲300毫秒，
<meta name="viewport" content="width=device-width, initial-scale=1">
3、所有版本的Android Chrome瀏覽器，如果設定viewport meta的值有user-scalable=no，瀏覽器也是會馬上觸發點擊事件，
4、IE11+瀏覽器設定了css的屬性touch-action: manipulation，它會在某些標簽（a，button等）禁止雙擊事件，IE10的為-ms-touch-action: manipulation
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60265.html
標籤：Html/Css
上一篇：移動端常見問題（影片演示）