移动端click延迟和tap事件
生活随笔
收集整理的這篇文章主要介紹了
移动端click延迟和tap事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、click等事件在移動端的延遲
click事件在移動端和pc端均可以觸發，但是在移動端有延遲現象。
1、背景
由于早期移動設備瀏覽網頁時內容較小，為了增強用戶體驗，蘋果公司專門為移動設備設計了雙擊放大的功能，以確保用戶可以方便地放大網頁內容，但是當用戶單擊按鈕的時候，移動設備需要延遲約300ms執行，以判斷用戶是否是要雙擊
2、驗證
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><title>click的延遲</title><style type="text/css">html,body {height: 100%;}body {background-color: hotpink;}</style><script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script><script>eruda.init();</script></head><body></body> </html><script type="text/javascript">window.onload = function() {document.body.onclick = function() {console.log("click延遲", Date.now() - startTime);};//定義一些必須要使用的變量var startTime = 0;document.body.addEventListener("touchstart", function(e) {console.log(e);console.log("touchstart");//獲取當前系統時間startTime = Date.now();});document.body.addEventListener("touchmove", function() {console.log("touchmove");});document.body.addEventListener("touchend", function() {console.log("touchend");//計算 差值console.log("時差", Date.now() - startTime);});}; </script>移動端 事件響應原則：優先響應移動端獨有事件
二、解決辦法
1、使用touch事件模擬click事件
如下使用touchstart和touched封裝了一個移動端的tap事件
var idcast = {// 傳入dom元素tap: function(dom, callback) {//判斷是否傳入了dom元素,或者dom元素是否是一個對象if (!dom || typeof dom != "object") {return;}var startX, startY, time, moveX, moveY, distanceX, distanceY;dom.addEventListener("touchstart", function(e) {if (e.targetTouches.length > 1) {return;}startX = e.targetTouches[0].clientX;startY = e.targetTouches[0].clientY;time = Date.now();});dom.addEventListener("touchend", function(e) {if (e.changedTouches.length > 1) {//說明不止一個手指return;}//判斷時間差異if (Date.now() - time > 150) {console.log("長按操作");return;}//獲取松開手指的時候的坐標與觸摸開始時的坐標差異moveX = e.changedTouches[0].clientX;moveY = e.changedTouches[0].clientY;distanceX = moveX - startX;distanceY = moveY - startY;//判斷坐標差異if (Math.abs(distanceX) < 6 && Math.abs(distanceY) < 6) {//說明是點擊而非滑動//執行tap事件相應之后的處理操作//若函數不為空才調用callback && callback(e);console.log("移動端點擊單擊事件--tap事件");} else {console.log("滑動操作");}});}};可以直接調用idcast中tap方法。
2、使用zepto中已經封裝好的tap事件直接調用
$(menuBox).on("tap",callback)
zepto下載鏈接: https://github.com/madrobby/zepto
總結
以上是生活随笔為你收集整理的移动端click延迟和tap事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【笔记记录】系统策划案该怎么写
- 下一篇： 惠普打印机驱动服务器系统,在打印机服务器