|
根本原因：double click 雙擊 移動端默認雙擊情況下會有方法效果，當你點擊一次之后，移動端無法判斷你是否下一次還會繼續(xù)完成雙擊，因此存在300 ms 延遲
有一部分瀏覽器，比如chrome瀏覽器，當你在meta頭設置width=device-width時，它會自動禁止300 ms的延遲 推薦的解決方法：fastclick https://github.com/ftlabs/fastclick 原理：當檢測到touchend事件后，會觸發(fā)自己模擬的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瀏覽器已經(jīng)解決了這個問題
但是有部分瀏覽器比如安卓機上的還是會存在300ms延遲問題
解決方法：首先引入fastclick.js <script src="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瀏覽器添加監(jiān)聽事件 <meta name="viewport" content="width=device-width, initial-scale=1">
3、所有版本的Android Chrome瀏覽器，如果設置viewport meta的值有user-scalable=no，瀏覽器也是會馬上觸發(fā)點擊事件。 |
|
|
