2. 程式人生 > >JavaScript中的Touch事件簡介

JavaScript中的Touch事件簡介

阿新 • • 發佈：2018-09-27
ctrl 頁面加載 rotation 們的 並且 lse ctr 垂直 觸摸區域

在本教程中，我們可以通過檢查觸摸相關事件以及如何使用它們來檢測和響應觸摸和滑動事件，從而輕松獲得JavaScript。隨著基於觸摸的設備數量不斷增長，掌握這些事件對於理解老齡鼠標事件至關重要。本教程中的示例可以在觸摸和非觸摸啟用的設備中進行應用，而後者則會回退到您信任的鼠標。準備給那些手指做一點鍛煉嗎？我們走吧！

JavaScript觸摸事件

所以讓我們潛入它。以下列出了JavaScript中支持的觸摸事件：

JavaScript觸摸事件
活動名稱描述
touchstart 當用戶與觸摸表面接觸並在事件綁定的元素內創建觸摸點時觸發。
touchmove 當用戶在觸摸表面上移動觸摸點時觸發。
touchend 當用戶從曲面移除觸摸點時觸發。無論在綁定元素內部還是外部移動觸摸點，都會觸發，例如，如果用戶的手指首先從元素中滑出或者甚至離開屏幕邊緣。
TouchEnter在 觸摸點進入綁定元素時觸發。這個事件沒有泡沫。
touchleave 觸摸點離開綁定元素時觸發。這個事件沒有泡沫。
touchcancel 當觸摸點不再在觸摸表面上註冊時觸發。例如，如果用戶將觸摸點移動到瀏覽器UI之外或移動到插件中，或者彈出警報模式，則會發生這種情況。

這些事件可以附加到頁面上的任何元素，並傳遞一個事件對象，其中包含有關觸摸點的詳細信息，例如頁面上的坐標。使用element.addEventListener()

附加的事件（一個或多個），例如頁面的BODY：

1

2

3

4

五

6

7

window.addEventListener(‘load‘, function(){ // on page load

document.body.addEventListener(‘touchstart‘, function(e){

alert(e.changedTouches[0].pageX) // alert pageX coordinate of touch point

}, false)

}, false)

在這裏，我已經在頁面加載後附加了“ touchstart

”事件 document.body（您可能希望在此處執行此操作DOMContentLoaded）。內部的匿名函數 touchstart，我們看changedTouches的對象Event對象，其中包含由觸摸表面上的觸摸事件引發的每個觸摸點的信息。在這裏，我們只對觸摸的第一個觸摸點（即：手指）感興趣，特別 pageX是觸摸時頁面上的坐標。

每當觸發事件被觸發時，Event對象都會保存有關觸摸操作的大量信息; 您已經看到了它的 changedTouches對象，其中包含自上次觸摸事件以來已更改的觸摸點的信息。讓我們進一步采取上面的例子，通過引入touchmove和touchend事件來顯示DIV上從頭到尾的觸摸動作所經過的距離，從觸摸物體的手指到擡起。

示例（為非觸摸設備添加了鼠標模擬）：

觸碰我！

狀態

觸摸然後移動手指以查看當前觸摸狀態和行進距離。DIV的HTML標記僅包含：

1

2

3

4

五

<div class="box" id="box1">

<h3> Touch Me! </h3>

</div>

<h3 id="statusdiv">Status</h3>

腳本如下所示：

1

2

3

4

五

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

三十

31

32

<script>

window.addEventListener(‘load‘, function(){

var box1 = document.getElementById(‘box1‘)

var statusdiv = document.getElementById(‘statusdiv‘)

var startx = 0

var dist = 0

box1.addEventListener(‘touchstart‘, function(e){

var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)

startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser

statusdiv.innerHTML = ‘Status: touchstart<br> ClientX: ‘ + startx + ‘px‘

e.preventDefault()

}, false)

box1.addEventListener(‘touchmove‘, function(e){

var touchobj = e.changedTouches[0] // reference first touch point for this event

var dist = parseInt(touchobj.clientX) - startx

statusdiv.innerHTML = ‘Status: touchmove<br> Horizontal distance traveled: ‘ + dist + ‘px‘

e.preventDefault()

}, false)

box1.addEventListener(‘touchend‘, function(e){

var touchobj = e.changedTouches[0] // reference first touch point for this event

statusdiv.innerHTML = ‘Status: touchend<br> Resting x coordinate: ‘ + touchobj.clientX + ‘px‘

e.preventDefault()

}, false)

}, false)

</script>

這裏值得一提的幾點：

  • 我們調用event.preventDefault()以防止與每個事件關聯的默認操作發生。在的情況下 touchstart，並touchend舉例來說，如果綁定到元素是一個鏈接，而不是抑制默認的動作可能會導致瀏覽器導航至該鏈接，短切我們的操作的自定義序列。在這種情況下touchmove，event.preventDefault()當用戶在綁定元素內移動手指時，調用會 阻止瀏覽器滾動頁面。

  • 再一次，我們訪問 event.changedTouches[]每個觸摸事件內部的第一個元素，以引用對元素做出的第一個觸摸點（可能有多個手指使用），並檢查clientX屬性以獲得觸摸點相對於觸摸點的水平坐標瀏覽器的左邊緣（不包括任何滾動偏移）。這個屬性適合我們在這裏嘗試做的事情，這只是為了獲得在元素上保持觸摸時行進的相對距離。

  • 為了獲得在事件touchstart 和touchend事件之間行進的距離，我們startx 在touchstart獲得clientX觸摸起始位置的階段 定義變量。然後在整個 touchmove事件中，我們獲得clientX觸摸的位置並從中減去該startx值以獲得在保持觸摸點時行進的距離。

  • 註意touchend事件如何被觸發並顯示最終的靜止x坐標，即使手指在擡起手指時位於綁定元素之外也是如此。

該對象event.changedTouches[]只是在觸摸相關事件期間填充的Event對象的眾多屬性之一。現在是時候詳細研究這個對象了。

觸摸期間的事件對象

該事件對象是在JavaScript中這個神秘的獨角獸包含有關事件的信息發生時，無論它是一個鏈接的一個網址 onclick時，該鍵代碼在按下鍵的onkeypress事件等。隨著觸摸相關的事件，該事件對象充滿了一系列獨特的屬性，使我們能夠深入了解觸摸點的各個方面，從觸摸表面上觸摸的手指（或腳趾等）到屏幕上的精確坐標。

觸摸期間的事件對象
屬性描述
ALT鍵 布爾值，指示觸摸事件時是否按下了alt鍵。
changedTouches 一個Touch對象列表，代表直接參與此事件的每個觸摸點。特別：
  • 在touchstart，它包含在此touchstart事件期間與觸摸表面接觸的手指列表。
  • 在touchmove，它包含在此touchmove事件期間移動的手指列表。
  • 在touchend，它包含在此touchend事件期間剛剛從觸摸表面移除的手指列表。
  • 在touchenter，它包含在此touchenter事件期間已進入觸摸表面的手指列表。
  • 在touchleave，它包含在此touchleave事件期間退出觸摸表面的手指列表。
您可以使用該length屬性來獲取內部的Touch對象的數量changedTouches[]。
中ctrlKey 布爾值，指示在觸摸事件時是否按下了crtrl鍵。
metaKey 布爾值，指示在觸摸事件時是否按下了元鍵。
Shift鍵， 布爾值，指示在觸摸事件時是否按下了shift鍵。
targetTouches 觸摸點的名單目前正在與觸摸表面接觸和從是本次活動的目標相同的元素開始了。

例如，假設您將touchstart事件綁定到DIV並將兩根手指放在表面上。targetTouches僅包含放置在DIV內部的手指的信息，而不包含任何外部信息。

您可以使用該length屬性來獲取內部的Touch對象的數量targetTouches[]。
觸摸 觸摸對象列表，表示當前與觸摸表面接觸的所有觸摸點，無論此刻觸摸點在哪個元素上。
類型 事件的觸發事件對象的類型，如touchstart，touchmove等
目標 與此事件關聯的觸摸的目標元素。

因此，例如，在touchstart事件期間，Event對象的touches屬性允許我們訪問當前與觸摸表面接觸的所有觸摸點

1

2

3

4

五

6

document.body.addEventListener(‘touchstart‘, function(e){

var touchlist = e.touches

for (var i=0; i<touchlist.length; i++){ // loop through all touch points currently in contact with surface

//do something with each Touch object (point)

}

}, false)

事件對象的三個屬性evt.changedTouches， evt.targetTouches以及evt.touches是包含觸摸對象的列表，用於制作每個觸摸點觸摸對象的所有清單對象。通過Touch對象，您可以獲得有關特定觸摸點的詳細信息，例如屏幕上的坐標，其唯一標識符，以幫助您識別哪個觸摸點是哪個，等等。您在開始時看到一些訪問內部包含的Touch對象的代碼evt.changedTouches：

1

2

3

4

五

box1.addEventListener(‘touchstart‘, function(e){

var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)

startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser

e.preventDefault()

}, false)

這e.changedTouches[0]是一個Touch對象，是Touch對象的 clientX 一個屬性。讓我們現在正式看看Touch對象：

觸摸對象
屬性描述
識別碼 用於幫助唯一標識當前與觸摸表面接觸的每個觸摸點的值。對於表面上的第一個唯一觸摸點，值從0開始，對於第二個觸摸點，值從1開始等。對於每個觸摸點保持該值，直到用戶的手指從表面擡起。

讓我們說用戶將兩根手指放在一個元素上。此時的每個手指都分配有唯一的標識符。移動手指時，您可以使用每個觸摸點的標識符來識別哪個觸摸點是哪個。
screenX 觸摸點相對於用戶屏幕左邊緣的x坐標。
screenY 觸摸點相對於用戶屏幕上邊緣的y坐標。
clientX 觸摸點相對於視口左邊緣的x坐標，不包括滾動偏移。
clientY 觸摸點相對於視口頂邊的y坐標，不包括滾動偏移。
pageX屬性 觸摸點相對於視口左邊緣的x坐標，包括滾動偏移。
pageY 觸摸點相對於視口頂邊的y坐標，包括滾動偏移。
半徑X 橢圓的半徑最接近地定義沿x軸的觸摸區域（例如，手指，觸筆）。
半徑Y 橢圓的半徑最接近地定義沿y軸的觸摸區域（例如，手指，觸筆）。
rotationAngle 該橢圓所描述（度）的角度和圍繞其中心順時針旋轉。 radiusXradiusY
力 以0到1之間的整數形式返回觸摸點的力，其中0表示設備檢測不到力，1表示最高值。
目標 觸摸點的目標元素; 換句話說，觸摸點落在的元素上，其可能與其對應的觸摸事件最初被限制的元素不同。在下面，this始終返回BODY元素，同時 Touch.target返回手指實際觸及的元素，可以是DIV，SPAN等：

document.body.addEventListener（‘touchstart‘，function（e）{
var touchobj = e.changedTouches [0]
console.log（this.tagName）//返回BODY
console.log（touchobj.target）//返回元素觸摸點登陸
}，false）

您最常訪問的Touch對象的屬性是與坐標相關的屬性，以幫助您確定在何處，以及使用一點數學，確定觸摸操作的執行方向和速度。

現在，讓我們倒回到Event對象，聊多一點的Touches，changedTouches和targetTouches性能，幫助更清楚地解釋他們的區別：

  • 觸摸：當前與觸摸表面接觸的所有觸摸點的列表。

  • changedTouches：此事件中涉及的觸摸點列表。例如，在某個touchmove事件中， changedTouches僅包含當前正在移動的觸摸點列表，而Touches將包含當前在表面上的所有觸摸點。

  • targetTouches：觸摸點的名單目前正在與觸摸表面接觸和從是本次活動的目標相同的元素開始了。例如，假設您將touchstart事件綁定到DIV並將兩根手指放在表面上。targetTouches僅包含放置在DIV內部的手指的信息，而不包含任何外部信息。

安德烈在 ＃2給了一個非常照明例子來闡明這三個屬性之間的細微差別：

  • 當我放下手指時，所有三個列表都將具有相同的信息。它將在changeTouches中，因為放下手指是導致事件發生的原因
  • 當我放下第二根手指時，觸摸將有兩個項目，每個手指一個。targetTouches僅在手指與第一根手指放在同一節點時才有兩個項目。changedTouches將擁有與第二根手指相關的信息，因為它是導致事件發生的原因
  • 如果我在同一時間放下兩根手指，可以在changedTouches中有兩個項目，每個手指一個
  • 如果我移動我的手指，唯一會改變的列表是 changedTouches並且將包含與移動的手指（至少一個）相關的信息。
  • 當我擡起一根手指時，它將從觸摸中移除，targetTouches 並將在changedTouches中應用程序耳朵，因為它是導致事件發生的原因
  • 刪除我的最後一根手指會留下觸摸和targetTouches為空，並且changedTouches將包含最後一根手指的信息

使用觸摸移動對象

使用觸摸在屏幕上水平或垂直移動DIV非常簡單。看看下面的內容，當觸摸和拖動時，它會在軌道上水平移動DIV：

示例（為非觸摸設備添加了鼠標模擬）：

拖動

1

2

3

4

五

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

三十

31

32

33

<script>

window.addEventListener(‘load‘, function(){

var box2 = document.getElementById(‘box2‘),

boxleft, // left position of moving box

startx, // starting x coordinate of touch point

dist = 0, // distance traveled by touch point

touchobj = null // Touch object holder

box2.addEventListener(‘touchstart‘, function(e){

touchobj = e.changedTouches[0] // reference first touch point

boxleft = parseInt(box2.style.left) // get left position of box

startx = parseInt(touchobj.clientX) // get x coord of touch point

e.preventDefault() // prevent default click behavior

}, false)

box2.addEventListener(‘touchmove‘, function(e){

touchobj = e.changedTouches[0] // reference first touch point for this event

var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point

// move box according to starting pos plus dist

// with lower limit 0 and upper limit 380 so it doesn‘t move outside track:

box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + ‘px‘

e.preventDefault()

}, false)

}, false)

</script>

<div id="track" class="track">

<div id="box2" style="left:0; top:0">Drag Me</div>

</div>

外部#trackDIV是相對定位的元素，而#box2內部包含的DIV絕對定位。我們得到#box2DIV的初始左側位置和touchstart事件觸點的x坐標 。註意我在touchobj.clientX這裏使用; 我們可以很容易地使用touchobj.pageX它，這沒關系，因為我們只使用這個屬性來幫助確定觸摸點的相對距離。

在touchmove事件期間，我們通過獲取其當前x坐標並從中減去初始x坐標來計算移動觸摸點行進的距離。然後，為了移動#box2DIV，我們將該距離添加到DIV的初始左側位置，投入下限和上限0和380px，以防止DIV移動到父DIV之外。隨著我們的DIV盒現在用我們的手指移動！

JavaScript中的Touch事件簡介

相關推薦

JavaScript中的Touch事件簡介

ctrl 頁面加載 rotation 們的 並且 lse ctr 垂直 觸摸區域 在本教程中，我們可以通過檢查觸摸相關事件以及如何使用它們來檢測和響應觸摸和滑動事件，從而輕松獲得JavaScript。隨著基於觸摸的設備數量不斷增長，掌握這些事件對於理解老齡鼠標事件至關重要。

javascript中的事件問題的總結

att list 原型鏈 font n) 交互 函數 onclick 定義 一.什麽是事件？ 　　事件就是DOM和瀏覽器之間的交互行為(只要觸發了這個行為，也就相當於觸發了事件)，我們可以通過事件監聽來綁定事件，例如：box.onclick=function(){}，如果我

javascript中的事件委托或是事件代理詳解

開始 reat 事件 網上 html 比較 移動 由於 move 概述： 那什麽叫事件委托呢？它還有一個名字叫事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。那這是什麽意思呢？網上的各位大牛們講

Javascript中的事件委托機制

過程 一次 我們 over tar for 完成 tel em1 事件委托 事件委托，顧名思義，就是將本來要觸發在A元素身上的事件，委托給B元素來觸發，例如像onclick，onmouseover等事件都可以通過事件委托去觸發。 事件委托實際上是通過事件冒泡的原理，將事件綁

JavaScript中的事件

post 阻止 over parseint 大小寫 null t對象 影響 roo #總結 上星期五主要內容講的是事件有事件流的概念，總結來說就是三種傳遞的方法，dom瀏覽器默認為從下往上的冒泡方式，但是可以支持捕獲方式，而IE只有冒泡。 事件分四種：內嵌事件、DOM0

WebView載入的網頁中touch事件處理

        一直有接觸webview，也用到了很多關於webview的各種特性，一直沒找到時機吧所有的webview的用法總結起來，這次也暫時先記錄一下webview載入網頁，我們在網頁中的點選，滑動等動作的事件處理機制。當時的需求大概是我在fragmen

理解Javascript中的事件繫結與事件委託（轉載）

最近在深入實踐js中，遇到了一些問題，比如我需要為動態建立的DOM元素繫結事件，那麼普通的事件繫結就不行了，於是通過上網查資料瞭解到事件委託，因此想總結一下js中的事件繫結與事件委託。 事件繫結 最直接的事件繫結：HTML事件處理程式 如下示例程式碼，通過節點屬性顯式宣

javascript中的事件處理程式

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 視窗事件屬性（Window Event Attributes） ::::::::::::::::::

JavaScript中按鍵事件的e.keyCode || e.which || e.charCode

1、瀏覽器的按鍵事件 瀏覽器有3種按鍵事件——keydown，keypress和keyup，分別對應onkeydown、onkeypress和onkeyup3個事件控制代碼。 一個典型的按鍵會產生所有這三種事件，依次是keydown-->keypress-->keyup。 1 <

事件（JavaScript中的事件）

事件的型別 事件的定義 指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便事件發生的時候執行相應的程式碼。 事件型別 事件型別是一個用來說明發生什麼型別事件的字串。像滑鼠懸浮，按下鍵盤等。 事件目標 事件目標是發生的事

JavaScript中的事件代理

首先，事件有三個階段：捕獲、目標、冒泡（不瞭解的自行搜尋）。 那麼，當我需要給ul下1000個li都要繫結點選事件，應該用for迴圈遍歷？答案當然no。就算可以，但是你要明白，這麼做是要承擔足夠大的效能風險，因為首先你得用getElementByTagName("li")

javascript中change事件的用法

change 事件被<input>, <select>, 和<textarea> 元素觸發。 //觸發情況 1.<input type="radio">

JavaScript中的事件流(事件捕獲/冒泡)

一.事件流 1.事件流的介紹: 事件流描述的是從頁面中接收事件的順序. 事件流是描述的從頁面接受事件的順序,當幾個都具有事件的元素層疊在一起的時候,那麼你點選其中一個元素,並不是只有當前被點選的元素會觸發事件,而層疊在你點選範圍的所有元素都會觸發事件. 2.事件流包括兩種模式：冒泡和捕獲

前端筆記43——JavaScript中時事件繫結函式

前言 在上篇部落格《前端筆記42——JavaScript中函式》中，我們有說起JavaScript中的函式。在平時開發中我們點選事件要用的函式，我們要怎麼繫結讓使用者觸發的事件繫結函式呢？下面來接受方法。 事件繫結函式 程式碼例項： <!DOCTYPE html&g

關於JavaScript中的事件代理

今天面試某家公司Web前端開發崗位，前面的問題回答的都還算湊活，並且又問了一下昨天面試時做的一道陣列去重問題的解題思路（關於陣列去重問題，可以觀賞我前幾天寫的：http://www.cnblogs.com/craftsman-gao/p/4766223.html。幸好前幾

JavaScript 中的事件介紹以及相容

**JavaScript 中的事件介紹以及相容 事件型別 (1)事件的定義 指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便事件發生的時候執行相應的程式碼。 ①事件型別：事件型別是一個用來說明發生什麼型別事件的字串。像滑鼠懸浮，

JavaScript中click()事件失效

    今天上午工作的時候，遇見了一個奇怪的事情——Javascript的click()事件竟然失效了。     超連結的點選事件在JS除錯中應該是最容易通過的了，但是新編寫的指令碼卻出現了超時報錯。在“請求解密”裡面搜尋console，卻發現沒有任何報錯。於

JavaScript中的事件冒泡與捕獲

事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。 考慮下面這段程式碼 <div id="outer"> <p id="inner">Click me!</p>

UIScrollView的作用原理，實現scrollView中touch事件作用子檢視

我們知道當多個檢視進行疊加的時候，touch事件是作用到最上面的檢視上，但是如果父檢視是UIScrollView，如果預設，可能touch子檢視會造成UIScrollView的滾動。 UIScrollView滾動的原因，可以看UIScrollView 原理。 我在這裡

javascript中的事件Event（一）— 事件流

 一、Event基本資訊1、事件流：描述的是從頁面中接受事件的順序       IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。 2、事件冒泡      IE的事件流叫做事件冒泡(event bubbing)，即事件開始時由具體的元素接受，然後逐級向上傳播