HTML5觸控事件(touchstart、touchmove和touchend) (轉)
HTML5中新新增了很多事件,但是由於他們的相容問題不是很理想,應用實戰性不是太強,所以在這裡基本省略,我們們只分享應用廣泛相容不錯的事件,日後隨著相容情況提升以後再陸續新增分享。今天為大家介紹的事件主要是觸控事件:touchstart、touchmove和touchend。
一開始觸控事件touchstart、touchmove和touchend是iOS版Safari瀏覽器為了向開發人員傳達一些資訊新新增的事件。因為iOs裝置既沒有滑鼠也沒有鍵盤,所以在為移動Safari瀏覽器開發互動性網頁的時候,PC端的滑鼠和鍵盤事件是不夠用的。
在iPhone 3Gs釋出的時候,其自帶的移動Safari瀏覽器就提供了一些與觸控(touch)操作相關的新事件。隨後,Android上的瀏覽器也實現了相同的事件。觸控事件(touch)會在使用者手指放在螢幕上面的時候、在螢幕上滑動的時候或者是從螢幕上移開的時候出發。下面具體說明:
touchstart事件:當手指觸控螢幕時候觸發,即使已經有一個手指放在螢幕上也會觸發。
touchmove事件:當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間,呼叫preventDefault()事件可以阻止滾動。
touchend事件:當手指從螢幕上離開的時候觸發。
touchcancel事件:當系統停止跟蹤觸控的時候觸發。關於這個事件的確切出發時間,文件中並沒有具體說明,我們們只能去猜測了。
上面的這些事件都會冒泡,也都可以取消。雖然這些觸控事件沒有在DOM規範中定義,但是它們卻是以相容DOM的方式實現的。所以,每個觸控事件的event物件都提供了在滑鼠實踐中常見的屬性:bubbles(起泡事件的型別)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯的預設動作)、clientX(返回當事件被觸發時,滑鼠指標的水平座標)、clientY(返回當事件觸發時,滑鼠指標的垂直座標)、screenX(當某個事件被觸發時,滑鼠指標的水平座標)和screenY(返回當某個事件被觸發時,滑鼠指標的垂直座標)。除了常見的DOM屬性,觸控事件還包含下面三個用於跟蹤觸控的屬性。
touches:表示當前跟蹤的觸控操作的touch物件的陣列。
targetTouches:特定於事件目標的Touch物件的陣列。
changeTouches:表示自上次觸控以來發生了什麼改變的Touch物件的陣列。
每個Touch物件包含的屬性如下。
clientX:觸控目標在視口中的x座標。
clientY:觸控目標在視口中的y座標。
identifier:標識觸控的唯一ID。
pageX:觸控目標在頁面中的x座標。
pageY:觸控目標在頁面中的y座標。
screenX:觸控目標在螢幕中的x座標。
screenY:觸控目標在螢幕中的y座標。
target:觸目的DOM節點目標。
上面的屬性光這麼看,果然非常繁瑣,每個屬性說的都是那麼的細緻,只有真刀實槍的來點小例子才能更加明白其中的奧妙。所以小例子如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | function load (){ document.addEventListener( 'touchstart' ,touch, false); document.addEventListener( 'touchmove' ,touch, false); document.addEventListener( 'touchend' ,touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById( "inp" ); switch(event.type){ case "touchstart" : oInp.innerHTML = "Touch started (" + event.touches[ 0 ].clientX + "," + event.touches[ 0 ].clientY + ")" ; break; case "touchend" : oInp.innerHTML = "<br>Touch end (" + event.changedTouches[ 0 ].clientX + "," + event.changedTouches[ 0 ].clientY + ")" ; break; case "touchmove" : event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[ 0 ].clientX + "," + event.touches[ 0 ].clientY + ")" ; break; } } } window.addEventListener( 'load' ,load, false); |
對上面的程式碼稍微做點改動,可以判斷水平方向滑動的方向,然後左相應的動作,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | function load(){ document.addEventListener( 'touchstart' ,touch, false); document.addEventListener( 'touchmove' ,touch, false); document.addEventListener( 'touchend' ,touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById( "inp" ); var distance,clientX_start,clientX_end, minRange= 10 ; this.clientX_start; this.direction; this.callbackFun=function(){ if(this.direction== 'ltr' ) { console.log( '從左往右' ); } else { console.log( '從右往左' ); } } switch(event.type){ case "touchstart" : clientX_start=event.touches[ 0 ].clientX; this.clientX_start=clientX_start; break; case "touchend" : this.callbackFun(); break; case "touchmove" : event.preventDefault(); clientX_end = event.changedTouches[ 0 ].clientX; //判斷移動的方向 distance=clientX_end-this.clientX_start; if(this.clientX_start+minRange<clientX_end) { this.direction= 'ltr' ; } else if(this.clientX_start-minRange>clientX_end){ this.direction= 'rtl' ; } break; } } } window.addEventListener( 'load' ,load, false); |
相關文章
- HTML5實戰與剖析之觸控事件(touchstart、touchmove和touchend)(轉)HTML事件
- 移動端事件touchstart、touchmove、touchend詳解事件
- [翻譯]整合滑鼠、觸控 和觸控筆事件的Html5 Pointer Event Api事件HTMLAPI
- 觸控事件事件
- JS觸控事件JS事件
- 觸控事件02事件
- ScrollView 觸控事件View事件
- Unity觸控式螢幕觸控事件定義Unity事件
- IOS繫結touchend事件失效iOS事件
- HTML5觸控事件實現移動端簡易進度條HTML事件
- 手機端html5觸屏事件(touch事件)HTML事件
- Flutter:如何響應觸控事件Flutter事件
- 觸控事件獲取座標事件
- Android觸控事件(上)——事件的由來Android事件
- Android觸控事件(下)——事件的分發Android事件
- 如何解決 touchstart 事件與 click 事件的衝突事件
- 微信小遊戲開發(4)-動畫和觸控事件遊戲開發動畫事件
- Android觸控事件的應用Android事件
- 微信小程式之觸控事件(六)微信小程式事件
- 安卓觸控事件與單擊事件的區別安卓事件
- Android觸控事件(續)——點選長按事件Android事件
- iOS中觸控事件的傳遞和響應機制iOS事件
- Android觸控事件傳遞機制Android事件
- 【透鏡系列】看穿 > 觸控事件分發 >事件
- iOS學習筆記05 觸控事件iOS筆記事件
- Android中TouchEvent觸控事件機制Android事件
- Android 觸控事件處理機制Android事件
- 通過程式碼控制View的觸控事件被觸發View事件
- iOS開發學習之觸控事件和手勢識別iOS事件
- 微信使用touchstart錄音,安卓觸發不靈敏安卓
- js 建立和觸發事件 和 自定義事件JS事件
- iOS開發系列--觸控事件、手勢識別、搖晃事件、耳機線控iOS事件
- android 管理ViewGroup中的觸控事件AndroidView事件
- WPF進階技巧和實戰09-事件(2-多點觸控)事件
- Android中的視窗座標體系和螢幕的觸控事件Android事件
- H5觸控事件判斷滑動方向H5事件
- 觸控事件分發核心機制優化吸收事件優化
- Android中觸控事件的傳遞機制Android事件