首頁 >web前端 >H5教程 >行動端WEB開發中click,touch,tap事件使用詳解

行動端WEB開發中click,touch,tap事件使用詳解

php中世界最好的语言
php中世界最好的语言原創
2018-06-04 11:54:145935瀏覽

這次帶給大家行動端WEB開發中click,touch,tap事件使用詳解,行動端WEB開發中click,touch,tap事件所使用的##注意事項<span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>有哪些,下面就是實戰案例,一起來看一下。 <span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

一、click 和tap 比較<span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

#兩者都會在點擊時觸發,但在手機WEB端,click會有 200~300 ms,所以請用tap取代click作為點擊事件。

singleTap和doubleTap 分別代表單次點擊和雙次點擊。

二、關於tap的點透處理

#在使用zepto框架的tap來行動裝置瀏覽器內的點擊事件,來規避click事件的延遲回應時,有可能出現點透的情況,即點擊會觸發非當前層的點擊事件。

處理方式:

(1)、

github上有一個叫做fastclick的函式庫,它也能規避行動裝置上click事件的延遲回應,https:// github.com/ftlabs/fastclick
將它用script標籤引入頁面(該庫支援AMD,所以你也可以依照AMD規範,用諸如
require#.js的模組載入器引入),並且在dom ready時初始化在body上,如:

$(function(){
    newFastClick(document.body);
})

然後給需要「無延遲點擊」的元素綁定click事件(注意不再是綁定zepto的tap事件)即可。
當然,你也可以不在body上初始化它,而在某個dom上初始化,這樣,只有這個dom和它的子元素才能享受「無延遲」的點擊

實務開發中發現,當元素綁定fastclick後,click回應速度比tap還要快一點點。哈哈

(2)、為元素綁定touchend事件,並在內部加上e.#preventDefault();

$demo.on(&#39;touchend&#39;,function(e){//改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//阻止“默认行为”
})

<span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

三、touch事件touch是針對觸控螢幕手機上的觸控事件。 現今大多數觸控螢幕手機webkit核心提供了touch事件的監聽,讓開發者可以取得使用者觸控螢幕時的一些資訊。

其中包括:touchstart,touchmove,touchend,touchcancel 這四個事件

touchstart,touchmove,touchend事件可以類比於mousedown,mouseover
,mouseup的觸發。

touchstart: 當手指觸摸螢幕會觸發;

#touchmove : 當手指在螢幕上移動時,會觸發;

touchend : 當手指離開畫面時,會觸發;

而touchcancel許多人不知道它何時會被觸發而忽略它,其實當你的手指還沒離開畫面時,有系統等級的操作發生時就會觸發touchcancel,例如alert和confirm彈框,又或者是android系統的功能彈跳窗。

這4個事件的觸發順序為:

touchstart -> touchmove
-> …… -> touchmove ->touchend

#

但是單憑監聽上面的單一事件,不足以滿足我們去完成監聽在觸控螢幕手機常見的一些手勢操作,如雙擊、長按、左右滑動、縮放等手勢操作。需要組合監聽這些事件去封裝對這類手勢動作。

其實市面上很多框架都針對手機瀏覽器封裝了這些手勢,例如jqmobile、zepto、jqtouch,不過悲劇發生了,對於某些android系統(我自己測試到的在android 4.0.x),touchmove和touchend事件不能被很好的觸發,舉例子說明下:

比如手指在屏幕由上向下拖動頁面時,理論上是會觸發一個 touchstart ,很多次 touchmove
,和最終的 touchend ,可是在android 4.0上,touchmove只被觸發一次,觸發時間和touchstart
差不多,而touchend直接沒有被觸發。這是一個很嚴重的bug,在google Issue已有不少人提出 http://code.google.com/p/android/issues/detail?id=19827

暫時只發現在android 4.0會有這個bug,據說ios 3.x的版本也會有。

而顯然jqmobile、zepto等都沒有意識到這個bug對監聽實作帶來的嚴重影響,所以在直接使用這些框架的event時,或多或少會出現相容性問題!

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

常用的e8e496c15ba93d81f6ea4fe5f55a2244程式碼整理匯總

怎麼使用JS取得函數參數名稱

#

以上是行動端WEB開發中click,touch,tap事件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn