JS—觸摸事件、手勢事件
阿新 • • 發佈:2017-07-02
page handle 通過 說明 script maximum eve title get
JS—觸摸事件、手勢事件
-
- dbclick
觸屏設備不支持雙擊事件。雙擊瀏覽器窗口,會放大畫面。
可以通過在head標簽內加上這麽一行:
可以實現,我們編寫的頁面不會隨著用的手勢而放大縮小。<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
關於meta
標簽,我還沒有研究過,罪過啊。 - mouse
在觸屏上,我們單擊一個元素,會相應的觸發:mousemove
mousedown
mouseup
click
,所以當我們編寫移動客戶端界面時,可以為元素直接添加move事件,可以提高效率。
同時也會觸發mouseover
mouseout
,測試結果,我發現,只有當頁面第一次刷新時,單擊元素,參會觸發mouseover事件。
隨著觸屏移動端設備的普及使用,W3C開始制定TouchEvent規範。
- 觸摸事件
該類事件會在用戶手指放在屏幕上面時,在屏幕上滑動時,或從屏幕上移開時觸發。具體來說有以下幾個觸摸事件。- touchstart
當手指放在屏幕上觸發。 - touchmove
當手指在屏幕上滑動時,連續地觸發。 - touchend
當手指從屏幕上離開時觸發。 - touchcancel
當系統停止跟蹤時觸發,系統什麽時候取消,文檔沒有明確的說明。
【總】以上四個,是w3c提供的觸摸事件,只針對觸摸設備,最常用的是前三個。
由於觸摸會導致屏幕動來動去,所以可以會在這些事件的事件處理函數內使用event.preventDefault()
- touchstart
- 除了常用的DOM屬性,觸摸事件還包含下列三個用於跟蹤觸摸的屬性。
- touches:表示當前跟蹤的觸摸操作的touch對象的數組。
當一個手指在觸屏上時,event.touches.length=1
,
當兩個手指在觸屏上時,event.touches.length=2
,以此類推。 - targetTouches:特定於事件目標的touch對象數組。
因為touch事件是會冒泡的,所以利用這個屬性指出目標對象。 - changedTouches:表示自上次觸摸以來發生了什麽改變的touch對象的數組。
每個touch對象都包含下列幾個屬性: - clientX:觸摸目標在視口中的x坐標。
clientY:觸摸目標在視口中的y坐標。
identifier:標識觸摸的唯一ID。
pageX:觸摸目標在頁面中的x坐標。
pageY:觸摸目標在頁面中的y坐標。
screenX:觸摸目標在屏幕中的x坐標。
screenY:觸摸目標在屏幕中的y坐標。
target:觸摸的DOM節點目標。
【如何使用呢?】
使用clientX……時,必須要指明具體的touch對象,而不要直接指明數組。EventUtil.addHandler(div,"touchstart",function(event){ div.innerHTML=event.touches[0].clientX+‘,‘+event.touches[0].clientY; }); EventUtil.addHandler(div,"touchmove",function(event){ event.preventDefault(); div.innerHTML=event.touches[0].clientX; }); EventUtil.addHandler(div,"touchend",function(event){ div.innerHTML=event.changedTouches[0].clientY; });
event.touches[0]
在touchend
事件處理函數中,當該事件發生時,touches裏面已經沒有任何的touch對象了,此時,就要使用changeTouches集合。
- touches:表示當前跟蹤的觸摸操作的touch對象的數組。
- 手勢事件
- gesturestart:當一個手指已經按在屏幕上,而另一個手指又觸摸在屏幕時觸發。
- gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。
- gestureend:當任何一個手指從屏幕上面移開時觸發。
【註意】只有兩個手指都觸摸到事件的接收容器時才觸發這些手勢事件。
- 觸摸事件與手勢事件之間的關系
1、當一個手指放在屏幕上時,會觸發touchstart
事件,如果另一個手指又放在了屏幕上,則會觸發gesturestart
事件,隨後觸發基於該手指的touchstart
事件。
2、如果一個或兩個手指在屏幕上滑動,將會觸發gesturechange
事件,但只要有一個手指移開,則會觸發gestureend
事件,緊接著又會觸發toucheend
事件。 - 手勢的專有屬性
- rotation:表示手指變化引起的旋轉角度,負值表示逆時針,正值表示順時針,從零開始。
- scale:表示兩個手指之間的距離情況,向內收縮會縮短距離,這個值從1開始,並隨距離拉大而增長。
- dbclick
JS—觸摸事件、手勢事件