觸屏touch事件記錄

1、chrome中的Remote Debugging

一開始並無用這個調試，不事後面須要多點觸碰，可chrome模擬器中我沒看到這個功能。忽然看到了Remote Debugging，網站須要FQ才能瀏覽。

1）以個人紅米爲例，首先要打開USB調試

 

2）手機鏈接電腦，打開PC的chrome，輸入「chrome://inspect」，「Discover USB devices」這裏要打勾，我打開這個頁面的時候默認就勾上了。

手機上面也要安裝chrome，下面「NOTE 1LTE」就是個人手機，已經鏈接上了

 

3）點擊上圖中的inspect，就會跳出一個新的頁面

 

2、touch觸摸事件

頁面HTML結構以下：內容省略了，爲了有滾動條，故意弄的長了點，點擊查看在線代碼。

<section id="section1">......</section>
<section id="section2">......</section>
<section id="section3">......</section>
<section id="section4">......</section>
<section id="section5">.......</section>
<section id="section6">......</section>

touchstart：當觸點與觸控平面接觸時觸發。在PC端，咱們常常會用到click，可是在移動端click有300ms的延遲。

touchmove：當觸點在觸控平面上移動時觸發。

touchend：當觸點離開觸控平面時觸發。

下面看看4個事件的執行順序（在chorme中模擬Mobile點擊）。

document.addEventListener('touchstart', function(event) {
  console.log('touchstart');
}, false);
document.addEventListener('touchmove', function(event) {
  console.log('touchmove');
}, false);
document.addEventListener('touchend', function(event) {
  console.log('touchend');
}, false);
document.addEventListener('click', function(event) {
  console.log('click');
}, false);

1）先作點擊，結果是click事件最後執行，若是在「touchstart」事件中加上「event.preventDefault();」，則會阻止click事件的執行。

關於事件的說明能夠參考《JavaScript中事件處理》

用本身的紅米note1測試的時候UC瀏覽器，微信瀏覽器，自帶的瀏覽器均是這個順序。

 

2）再作移動，輕輕一移就觸發了18次「touchmove」事件。

 

3、事件中的event參數

touch和click事件中的event是不一樣的對象。click多了好多參數，這裏只關注下touche事件中的event。

 

1）touches

當前位於屏幕上的全部手指的列表，是一個Touch對象數組。

我把一個手指放到屏幕上數量就是1，兩個手指就是2，三個手指就是3。

沒有滾動條	有滾動條

touch對象中有多個座標屬性，蠻搞的。

1. clientX/clientY：觸摸點相對於瀏覽器窗口viewport的位置，不包含滾動距離。這個值會根據用戶對可見視區的縮放行爲而發生變化。

這裏我經過控制meta中initial-scale屬性來變化。能夠看到放大後，cilentY將近是原來的一半。

initial-scale=1	initial-scale=2

2. pageX/pageY：和 clientX/clientY 屬性不一樣，這個值是相對於整個html文檔的座標， 這個值包含了垂直滾動的偏移。

上面有滾動條的圖片屬性中能夠看到pageY遠大於旁邊沒有滾動條的。

3. screenX/screenY：觸摸點相對於屏幕screen的位置。

在IOS中與clientX/clientY屬性不一樣，不會受到initial-scale的影響；而在安卓中微信和UC會受之影響，而手機版chrome與紅米note自帶的瀏覽器不會被影響。

在chrome中作模擬Mobile就會發如今同一個位置，不一樣initial-scale中點擊下去，screenY/screenX結果都是相同的。

在Iphone6中測試X軸的3種狀況：

a. 若是initial-scale=1.0，那麼在沒有滾動條的時候，3個數值是同樣的，都按屏幕寬度375來計算

b. 若是沒有下面的viewport語句，那麼screenX會以屏幕寬度375來計算，而其餘兩個值會按放大後的計算數值

c. 若是initial-scale=2.0，screenX仍是會以屏幕寬度375來計算，而其餘兩個值會按縮小一倍後的計算數值

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

4. radiusX/radiusY：可以包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)/垂直軸(Y軸)半徑，這個值的單位和screenX/screenY相同。

5. rotationAngle：以度爲單位的旋轉角，由radiusX和radiusY描述的正方向的橢圓，經過順時針旋轉這個角度後，能最精確地覆蓋住用戶和觸摸平面的接觸面的角度。

6. force：手指擠壓觸摸平面的壓力大小，從0.0(沒有壓力)到1.0(設備可識別的最大壓力)的浮點數。

7. target：這個觸點最開始被跟蹤時(在 touchstart 事件中)，觸點位於的HTML元素。

8. identifier：Touch 對象的惟一標識符。

 

2）changedTouches

這個 TouchList 對象列出了和這個觸摸事件對應的 Touch 對象。

1. 在touchstart中：列出在這次事件中新增長的觸點。若是同時放下一根或兩根手指，那麼將與touches相同，但若是先放一根，在放第二根，那就會不一樣。

2. 在touchmove中：列出和上一次事件相比較，發生了變化的觸點。

用chrome的Remove Debugging測試，我用了兩根手指。但兩根手指接觸到屏幕是有時差的。因此在第一次move的時候changedTouches就一個值。

changedTouches[0]=touches[1]，最後一個也是這樣。接下來移動手指的時候，changedTouches和touches是同樣的。

3. 在touchend中：列出離開觸摸平面的觸點（這些觸點對應已經不接觸觸摸平面的手指）。

仍是用兩根手指，依次將手指移開，當離開屏幕的時候，執行了兩次「touchend」事件。

第一次中打印的值以下，第二次的值中touches爲空，changedTouches的值就是第一次中的touches的值。

 

 

3）targetTouches

這個 TouchList 對象與touches相似，可是增長了個過濾條件，就是要與第一個手指點的地方（同一個節點內）相同。

1. 先將第一根手指點在了「id=section1」，再點第二根手指到不是「section1」的地方，看第二個「touchstart」事件中的內容：

 

targetTouches[0] = touches[1]

2. 與第一次不一樣，第二根手指也放到section1中

此次兩個是相等的。

 

參考資料：

http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y  

What is the difference between screenX/Y, clientX/Y and pageX/Y?

http://www.zhangyunling.com/?p=223   移動端的touch事件

http://www.aliued.cn/2013/04/27/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8Btouch-event%E7%AF%87.html   

移動開發之touch event篇

http://www.html5rocks.com/zh/mobile/touch/   多點觸摸網絡開發

http://stackoverflow.com/questions/7056026/variation-of-e-touches-e-targettouches-and-e-changedtouches  

Variation of e.touches, e.targetTouches and e.changedTouches