HTML5移動端觸摸事件


一、移動端事件問題

1.click事件300ms延遲問題

2007年第一代iphone發布,移動端Safari首創雙擊縮放功能,原理是click一次后,經過300ms之后檢測是否再有一次click,如果有就會縮放,如果沒有則是一個click事件。所以cilck操作會有卡頓感覺。

2.dblclick事件失效

由於雙擊縮放的存在,移動端的dblclick事件也失效了。

二、移動端觸摸事件

  • touchstart  在屏幕上按下手指時觸發
  • touchmove     在屏幕上移動手指時觸發
  • touchend        在屏幕上抬起手指時觸發
  • touchcancel    觸點由於某些原因被中斷時觸發。例如觸摸時電話接入或者彈出框,都會中斷觸摸。一般會在這時暫停游戲、存檔等操作。

三、TouchEvent事件對象

TouchEvent繼承了UIEvent和Event,事件對象中包含很多內容,這里挑一些常用的:

touches          位於當前屏幕上所有觸摸點列表(TouchList對象,包含若干個Touch對象)
targetTouches    起始於當前DOM元素,且沒有結束的觸摸點列表,是touches的一個嚴格子集(TouchList對象)
changedTouches   當前事件發生變化的觸摸點列表(TouchList對象).對於touchstart,新增加的觸點;對於touchmove,和上一次事件比較發生變化的觸點(任何一個屬性);對於touchend,離開屏幕的觸點。
currentTarget    捕獲層的DOM節點(即綁定事件的元素)
target      觸發事件的DOM節點(實際觸發的元素,target通常是位於currentTarget的子節點或其本身)
srcElement  與target本質相同,在早期的firfox中沒有srcElement,IE中沒有target
timeStamp   返回一個時間戳,從 epoch 開始的毫秒數。epoch 是一個事件參考點,在這里,它是客戶機啟動的時間。
type        當前事件的類型,如"touchstart"
altKey      布爾值,指明觸摸事件觸發時,鍵盤 alt 鍵是否被按下。
ctrlKey     布爾值,指明觸摸事件觸發時,鍵盤 ctrl 鍵是否被按下。

每個觸摸點(Touch對象)包含了如下屬性:

screenX / screenY  觸摸點在屏幕中的位置
pageX / pageY      觸摸點在整個文檔中的位置
clientX / clientY  觸摸點在可視區域中的位置
identifier         每個觸摸點的唯一標識符
target             該觸摸點最開始觸摸的dom元素,即觸發它的元素,無論觸點移動到了哪里,該值都不會改變。
radiusX / radiusY  觸摸點大概是一個橢圓,分別為水平軸半徑/垂直軸半徑(支持不好)
rotationAngle      觸摸點旋轉角度(順時針)
force              壓力大小,從0.0(沒有壓力)到1.0(最大壓力)的浮點數

四、基於觸摸事件的開發

以上的touch事件是HTML標准的內置事件,因為移動端的單雙擊事件問題和更豐富的用戶需求,僅僅依賴原生事件來開發是不夠方便的,因此出現了一些自定義事件的庫。比如jQuery Mobile庫和zeptojs庫中的tap類事件(用於代替click事件)和swipe類事件(定義滑動的事件)。我們還可以使用原生事件來自定義更高級的手勢,例如雙指放大縮小等。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM