touches、targetTouches與changedTouches

admin發表於2019-07-18

移動端觸屏事件基本知識可以參閱移動端touch事件一章節。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<style>
#ant {
  width: 100%;
  height: 300px;
  text-align:center;
  line-height:300px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.addEventListener("touchstart", showMsg);
  function showMsg(ev) {
    e.preventDefault();
    console.log(ev);
  }
}
</script>
</head>
<body>
<div id="ant">點選螢幕檢視資料</div>
</body>
</html>

使用谷歌開發者工具模擬移動端，觸控div元素，列印內容如下：

a:3:{s:3:\"pic\";s:43:\"portal/201907/18/124442wjg4zhwu81w1wvoh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

觸屏事件，就是手指在裝置螢幕上觸碰、滑動或者離開等操作，可以一個手指操作，也可以多個手指操作，操作資訊都儲存在TouchEvent型別事件物件中，此物件內容較多，大多與PC端事件內容重複，下面著重介紹一下touches、targetTouches與changedTouches的用法。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  background: red;
  width: 500px;
  height: 500px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.addEventListener("touchstart", function (ev) {
    e.preventDefault();
    console.log("touchstart");
    console.log(ev.touches)
    console.log(ev.changedTouches);
    console.log(ev.targetTouches);
  });
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

事件物件的touches、targetTouches與changedTouches屬性返回值是TouchList型別集合：

a:3:{s:3:\"pic\";s:43:\"portal/201907/18/124521kc57k3rt7uaaau5x.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

集合中儲存的是touch型別物件，一個touch型別物件代表一個手指在螢幕上觸點，如果集合中有多個touch型別物件，代表在螢幕上有多個觸點。

TouchList集合具有一個屬性和一個方法：

（1）.length屬性：

返回集合中touch物件的數量，只讀屬性。

（2）.item(index)方法：

返回集合中指定索引的touch物件；index表示touch物件在集合中的索引位置（從0開始）。

touches、targetTouches與changedTouches屬性：

1.touches屬性返回事件觸發時，表示當前螢幕上所有觸點物件的集合。

2.targetTouches屬性返回表示touchstart事件觸發所在元素上所有觸點物件的集合，即便觸點已經移出此元素甚至document，照常返回。

3.changedTouches屬性返回此次觸屏事件與上次觸屏事件發生變化的觸點物件集合：

（1）.對於touchstart事件，集合列出在此次事件中新增加觸點物件。

（2）.對於touchmove事件，集合列出和上一次事件相比較，發生了變化的觸點物件。

（3）.對於touchend事件，集合列出最後離開觸控平面的觸點物件。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
div {
  background: red;
  width: 500px;
  height: 500px;
}
p {
  background: green;
  width: 200px;
  height: 200px;
  font-size:12px;
}
</style>
<script>
window.onload = function () {
  let box = document.querySelector("div");
  let p = document.querySelector("p");
  box.addEventListener("touchstart", function (e) {
    e.preventDefault();
    var msg = "touches.length: " + e.touches.length +
              "<br> targetTouches.length: " + e.targetTouches.length +
              "<br> changedTouches.length: " + e.changedTouches.length;
    p.innerHTML = msg;
  })
}
</script>
</head>
<body>
<div>
  <p></p>
</div>
</body>
</html>

以上面程式碼為例子，進行不同的觸屏操作：

（1）.將一個手指放在div元素之上：

由於只有一個觸點，所以觸點物件都是1，並且觸點物件內容完全一樣：

[JavaScript] 純文字檢視 複製程式碼
window.onload = function () {
  let box = document.querySelector("div");
  let p = document.querySelector("p");
  box.addEventListener("touchstart", function (e) {
    e.preventDefault();
    var msg = "touches.length: " + e.touches.length +
              "<br> targetTouches.length: " + e.targetTouches.length +
              "<br> changedTouches.length: " + e.changedTouches.length;
    p.innerHTML = msg;
    console.log(e.touches[0]);
    console.log(e.targetTouches[0]);
    console.log(e.changedTouches[0]);
  })
}

使用谷歌開發者工具模擬一個手指觸屏，控制檯截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201907/18/124652lvkcltka7sw7yk6z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三個集合中的觸點物件內容是完全一樣的，非常容易理解：

（1）.對於touches集合，由於是單手指觸碰，螢幕上所有觸點僅有一個。

（2）.對於targetTouches集合，觸屏事件在div元素上發生，由於是單手指觸碰，所以此div元素上只有一個觸點。

（3）.對於changedTouches集合，在div元素上發生的事件是新增事件，增加一個觸點。

上述所描述的完全是同一個觸點物件，所以列印出來自然是相同的。

（2）.首先用一個手指放在div之外的地方，然後再放一個手指到div元素：

頁面列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201907/18/124739vs9aisbhbtizixmt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下：

第一階段，第一個手指放到非div元素：

（1）.對於touches集合，當第一個手指放到非div元素之上時，整個螢幕只有一個觸點。

（2）.對於targetTouches集合，在觸發事件的元素上有一個觸點物件。

（3）.對於changedTouches集合，此觸點是新增觸點。

第二階段，當另一個手指放到div元素：

（1）.對於touches集合，整個螢幕有兩個觸點。

（2）.對於targetTouches集合，當前事件是在div元素上觸發，也僅有一個觸點。

（3）.對於changedTouches集合，放到div的第二個手指產生一個新的觸點物件。

（3）.首先用一個手指放在div之外的地方，然後再依次放兩個手指到div元素：

頁面列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201907/18/124809kf2k9k6dhjjqddem.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分析如下：

第一階段，第一個手指放到非div元素：

（1）.對於touches集合，當第一個手指放到非div元素之上時，整個螢幕只有一個觸點。

（2）.對於targetTouches集合，在觸發事件的元素上有一個觸點物件。

（3）.對於changedTouches集合，此觸點是新增觸點。

第二階段，當另一個手指放到div元素：

（1）.對於touches集合，整個螢幕有兩個觸點。

（2）.對於targetTouches集合，當前事件是在div元素上觸發，也僅有一個觸點。

（3）.對於changedTouches集合，放到div的第二個手指產生一個新的觸點物件。

第三階段，當第三個手指放到div元素：

（1）.對於touches集合，整個螢幕有三個觸點。

（2）.對於targetTouches集合，第三次觸碰事件也是在div元素上觸發，所以div上有個兩個觸點。

（3）.對於changedTouches集合，放到div的第三個手指產生一個新的觸點物件。

Touch物件詳解：

上面已經介紹，Touch物件代表一個手指觸點物件，包含當前觸點的相關資訊。

控制檯截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201907/18/124849kw2hx2aaaxzvx3i2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

屬性說明如下：

（1）.identifier：此 Touch 物件的唯一識別符號。 一次觸控動作(我們指的是手指的觸控)在平面上移動的整個過程中，該識別符號不變。 可以根據它來判斷跟蹤的是否是同一次觸控過程，此值為只讀屬性。 

（2）.screenX：觸點相對於螢幕左邊沿的X座標。只讀屬性。 

（3）.screenY：觸點相對於螢幕上邊沿的Y座標。只讀屬性。 

（4）.clientX：觸點相對於可見視區(visual viewport)左邊沿的X座標。不包括任何滾動偏移。只讀屬性。 

（5）.TclientY：觸點相對於可見視區(visual viewport)上邊沿的Y座標。不包括任何滾動偏移。只讀屬性。 

（6）.pageX：觸點相對於HTML文件左邊沿的X座標。當存在水平滾動的偏移時，這個值包含了水平滾動的偏移。只讀屬性。 

（7）.pageY：觸點相對於HTML文件上邊沿的Y座標。當存在水平滾動的偏移時，這個值包含了垂直滾動的偏移。只讀屬性。

（8）.radiusX：能夠包圍使用者和觸控平面的接觸面的最小橢圓的水平軸(X軸)半徑。這個值的單位和 screenX 相同。只讀屬性。 

（9）.radiusY：能夠包圍使用者和觸控平面的接觸面的最小橢圓的垂直軸(Y軸)半徑。這個值的單位和 screenY 相同。只讀屬性。 

（10）.rotationAngle：它是這樣一個角度值：由radiusX 和 radiusY描述的正方向的橢圓，需要通過順時針旋轉這個角度值，才能最精確地覆蓋住使用者和觸控平面的接觸面。只讀屬性。 

（11）.force：手指擠壓觸控平面的壓力大小，從0.0(沒有壓力)到1.0(最大壓力)的浮點數。只讀屬性。 

（12）.target：當這個觸點最開始被跟蹤時(在 touchstart 事件中)，觸點位於的HTML元素。哪怕在觸點移動過程中，觸點的位置已經離開了這個元素的有效互動區域，或者這個元素已經被從文件中移除。需要注意的是，如果此元素在觸控過程中被移除，事件仍然會指向它，但是不會再冒泡這個事件到window 或 document物件。

相關文章