1. 程式人生 > >js中觸摸相關變量touches,targetTouches和changedTouches的區別

js中觸摸相關變量touches,targetTouches和changedTouches的區別

屬性 style 相同 pan tar chang color code bsp

  1. touches: 當前屏幕上所有觸摸點(手指)的列表;
  2. targetTouches: 當前DOM元素上所有觸摸點(手指)的列表;
  3. changedTouches: 涉及當前事件的觸摸點(手指)的列表
通過一個例子來區分一下觸摸事件中的這三個屬性:
  • 用一個手指接觸屏幕,觸發事件,此時這三個屬性有相同的值。
  • 用第二個手指接觸屏幕,此時,touches有兩個元素,每個手指觸摸點為一個值。當兩個手指觸摸相同元素時,targetTouches和touches的值相同,否則targetTouches 只有一個值。changedTouches此時只有一個值,為第二個手指的觸摸點。
  • 用兩個手指同時接觸屏幕,此時changedTouches有兩個值,每一個手指的觸摸點都有一個值
  • 手指滑動時,三個值都會發生變化
  • 一個手指離開屏幕,touches和targetTouches中對應的元素會同時移除,而changedTouches仍然會存在元素。
  • 手指都離開屏幕之後,touches和targetTouches中將不會再有值,changedTouches還會有一個值,此值為最後一個離開屏幕的手指的接觸點。

js中觸摸相關變量touches,targetTouches和changedTouches的區別