移動端tap事件(輕擊、輕觸)
阿新 • • 發佈：2018-07-19
float () pca 時間 間隔 amp click事件 idt touch
一、問題
①移動端也有click點擊事件，click點擊會延遲200~300ms
②因為點擊的響應過慢，影響了用戶體驗，所以需要解決響應慢的問題
二、解決方案
①使用tap事件：即輕擊，輕敲，響應速度快（不是原生事件，是通過touch相關事件衍生過來的）
<!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>tap事件</title> <style> .body{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px;background: #ccc; float: left; } </style> </head> <body> <div class="box"></div> <script> window.onload=function(){ // 封裝事件 bindTapEvent=function(dom,tapCallback,clickCallback){ var startTime=0; var isMove=false; dom.addEventListener(‘touchstart‘,function(e){ startTime=Date.now() }); dom.addEventListener(‘touchmove‘,function(e){ isMove=true }); dom.addEventListener(‘touchend‘,function(e){ if((Date.now()-startTime)<150 && isMove){ // 假設點擊的時間間隔小於150ms為輕擊事件 tapCallback && tapCallback.call(this,e) }else{ // 假設點擊的時間間隔大於150ms為點擊事件 clickCallback && clickCallback.call(this,e) } startTime=0; isMove=false; }); } // 調用 bindTapEvent(document.querySelector(‘.box‘),function(e){ console.log(‘tap事件‘) },function(e){ console.log(‘click事件‘) }) } </script> </body> </html>
②使用fastclick.js插件：可以提高移動端click響應速度，下載地址：https://github.com/ftlabs/fastclick
<script src="fastclick.js"></script> <script> // 當頁面的dom元素加載完成 document.addEventListener(‘DOMContentLoaded‘,function(){ // 初始化方法 FastClick.attach(document.body); },false); // 正常使用click事件即可 </script>
具體用法可以參考：
移動端tap事件(輕擊、輕觸)