標籤:window oct script ftl 事件 padding list har 假設
一、問題
①移動端也有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事件(輕擊、輕觸)