javascript移動開發(fā)中touch觸摸事件詳解_javascript技巧

originalEvent對象

在一次偶然的使用中，我發(fā)現(xiàn)當使用on()函數(shù)并且傳入第二個選擇器參數(shù)時,e.touches[0]的訪問為undefined，打印e發(fā)現(xiàn)，它的事件對象不是原生的事件對象。經(jīng)查閱發(fā)現(xiàn)它是jquery事件對象。

上面例子中event中有一個originalEvent屬性，而這才是真正的touch事件。jQuery.Event 是一個構(gòu)造函數(shù)，其創(chuàng)建一個可讀寫的jQuery事件對象，并在event 對象保留了對這個原生事件對象 event 的引用($event.originalEvent)。我們綁定的事件處理程序所處理的事件對象都是 $event。該方法也可以傳遞一個自定義事件的類型名，用于生成用戶自定義事件對象。

touch事件

touchmove: 當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。
touchstart: 當手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)
touchend: 當手指從屏幕上離開的時候觸發(fā)。

TouchEvent對象

每一個touch事件的觸發(fā)都會產(chǎn)生一個TouchEvent對象，以下是TouchEvent對象三個比較常用的重要屬性

touches 當前位于屏幕上的所有手指的一個列表。
targetTouches 特定于事件目標的Touch對象的數(shù)組。[當前手指]
changeTouches 表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

在這里，我用js寫了一個touch事件，點擊屏幕可觸發(fā),將其事件事件對象在控制臺打印出，結(jié)果如下（箭頭指向的是上述三個屬性）：

觸摸事件對象屬性

touches、targetTou、changeTouches都包含以下屬性值

clientX：觸摸目標在視口中的x坐標。
clientY：觸摸目標在視口中的y坐標。
identifier：標識觸摸的唯一ID。
pageX：觸摸目標在頁面中的x坐標。
pageY：觸摸目標在頁面中的y坐標。
screenX：觸摸目標在屏幕中的x坐標。
screenY：觸摸目標在屏幕中的y坐標。
target：觸摸的DOM節(jié)點目標。
還是上面的那個例子，changeTouches對象在控制臺輸出如下：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com