觸屏已經是我們身邊電子設備的常態了。觸摸事件當然也是隨著觸屏的出現，用戶使用最多的事件啦！
難道使用觸屏事件后，其他原來的鼠標事件就都不能用啦？當然不是，只不過不是那么好用啊。
針對鼠標事件，有哪些不適應？
dbclick
觸屏設備不支持雙擊事件。雙擊瀏覽器窗口，會放大畫面。
可以通過在head標簽內加上這么一行：
可以實現，我們編寫的頁面不會隨著用的手勢而放大縮小。
關于meta標簽，我還沒有研究過，罪過啊。
mouse
在觸屏上，我們單擊一個元素，會相應的觸發：mousemove mousedown mouseup click，所以當我們編寫移動客戶端界面時，可以為元素直接添加move事件，可以提高效率。
同時也會觸發mouseover與mouseout，測試結果，我發現，只有當頁面第一次刷新時，單擊元素，參會觸發mouseover事件。
隨著觸屏移動端設備的普及使用，W3C開始制定TouchEvent規范。
觸摸事件
該類事件會在用戶手指放在屏幕上面時，在屏幕上滑動時，或從屏幕上移開時觸發。具體來說有以下幾個觸摸事件。
1、touchstart
當手指放在屏幕上觸發。
2、touchmove
當手指在屏幕上滑動時，連續地觸發。
3、touchend
當手指從屏幕上離開時觸發。
4、touchcancel
當系統停止跟蹤時觸發，系統什么時候取消，文檔沒有明確的說明。
【總】以上四個，是w3c提供的觸摸事件，只針對觸摸設備，最常用的是前三個。
由于觸摸會導致屏幕動來動去，所以可以會在這些事件的事件處理函數內使用event.preventDefault()，來阻止屏幕的默認滾動。
除了常用的DOM屬性，觸摸事件還包含下列三個用于跟蹤觸摸的屬性。
1、touches：表示當前跟蹤的觸摸操作的touch對象的數組。
當一個手指在觸屏上時，event.touches.length=1,
當兩個手指在觸屏上時，event.touches.length=2，以此類推。
2、targetTouches：特定于事件目標的touch對象數組。
因為touch事件是會冒泡的，所以利用這個屬性指出目標對象。
3、changedTouches：表示自上次觸摸以來發生了什么改變的touch對象的數組。
每個touch對象都包含下列幾個屬性：
4、clientX：觸摸目標在視口中的x坐標。
clientY：觸摸目標在視口中的y坐標。
identifier：標識觸摸的唯一ID。
pageX：觸摸目標在頁面中的x坐標。
pageY：觸摸目標在頁面中的y坐標。
screenX：觸摸目標在屏幕中的x坐標。
screenY：觸摸目標在屏幕中的y坐標。
target：觸摸的DOM節點目標。
【如何使用呢？】
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; });使用clientX……時，必須要指明具體的touch對象，而不要直接指明數組。
event.touches[0]
在touchend事件處理函數中，當該事件發生時，touches里面已經沒有任何的touch對象了，此時，就要使用changeTouches集合。
手勢事件
【注意】只有兩個手指都觸摸到事件的接收容器時才觸發這些手勢事件。
觸摸事件與手勢事件之間的關系
1、當一個手指放在屏幕上時，會觸發touchstart事件，如果另一個手指又放在了屏幕上，則會觸發gesturestart事件，隨后觸發基于該手指的touchstart事件。
2、如果一個或兩個手指在屏幕上滑動，將會觸發gesturechange事件，但只要有一個手指移開，則會觸發gestureend事件，緊接著又會觸發toucheend事件。
手勢的專有屬性
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
