前面的話
iOS版Safari為了向開發人員傳達一些特殊信息，新增了一些專有事件。因為iOS設備既沒有鼠標也沒有鍵盤，所以在為移動Safari開發交互性網頁時，常規的鼠標和鍵盤事件根本不夠用。隨著Android 中的WebKit的加入，很多這樣的專有事件變成了事實標準，導致W3C開始制定Touch Events規范。本文將詳細介紹移動端touch事件
概述
包含iOS 2.0軟件的iPhone 3G發布時，也包含了一個新版本的Safari瀏覽器。這款新的移動Safari提供了一些與觸摸(touch)操作相關的新事件。后來，Android上的瀏覽器也實現了相同的事件。觸摸事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。具體來說，有以下幾個觸摸事件
touchstart:當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發touchmove:當手指在屏幕上滑動時連續地觸發。在這個事件發生期間，調用preventDefault()可以阻止滾動touchend:當手指從屏幕上移開時觸發touchcancel:當系統停止跟蹤觸摸時觸發(不常用)。關于此事件的確切觸發時間，文檔中沒有明確說明
【touchenter 和 touchleave】
觸摸事件規范中曾經包含touchenter和touchleave事件，這兩個事件在用戶手指移入或移出某個元素時觸發。但是這兩個事件從來沒有被實現。微軟有這兩個事件的替代事件，但是只有IE瀏覽器支持。某些情況下可以知道用戶手指滑入滑出某個元素是素是非常有用的，所以希望這兩個事件可以重返規范
在觸摸事件中，常用的是touchstart、touchumove和touchend這三個事件，與鼠標事件的對應如下
鼠標 觸摸 mousedown touchstart mousemove touchmove mouseup touchend
[注意]touch事件在chrome模擬器下部分版本使用DOM0級事件處理程序的方式來添加事件無效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #test{height:200px;width:200px;background:lightblue;} </style></head><body><div id="test"></div><script> (function(){ var stateMap = { touchstart_index : 0, touchmove_index : 0, touchend_index : 0 }, elesMap = { touch_obj: document.getElementById('test') }, showIndex, handleTouch; showIndex = function ( type ) { elesMap.touch_obj.innerHTML = type + ':' + (++stateMap[type + '_index']); }; handleTouch = function ( event ) { showIndex( event.type ); }; elesMap.touch_obj.addEventListener('touchstart', function(event){handleTouch(event);}); elesMap.touch_obj.addEventListener('touchmove', function(event){handleTouch(event);}); elesMap.touch_obj.addEventListener('touchend', function(event){handleTouch(event);}); })(); </script></body></html>
新聞熱點
疑難解答
圖片精選
