JS—觸摸事件、手勢事件

• • dbclick
    觸屏設備不支持雙擊事件。雙擊瀏覽器窗口，會放大畫面。
    可以通過在head標簽內加上這麽一行：

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

    可以實現，我們編寫的頁面不會隨著用的手勢而放大縮小。
    關於meta標簽，我還沒有研究過，罪過啊。
  • mouse
    在觸屏上，我們單擊一個元素，會相應的觸發：mousemove mousedown mouseup click，所以當我們編寫移動客戶端界面時，可以為元素直接添加move事件，可以提高效率。
    同時也會觸發mouseover
    與mouseout，測試結果，我發現，只有當頁面第一次刷新時，單擊元素，參會觸發mouseover事件。

  ---

  隨著觸屏移動端設備的普及使用，W3C開始制定TouchEvent規範。

  • 觸摸事件
    該類事件會在用戶手指放在屏幕上面時，在屏幕上滑動時，或從屏幕上移開時觸發。具體來說有以下幾個觸摸事件。
    • touchstart
      當手指放在屏幕上觸發。
    • touchmove
      當手指在屏幕上滑動時，連續地觸發。
    • touchend
      當手指從屏幕上離開時觸發。
    • touchcancel
      當系統停止跟蹤時觸發，系統什麽時候取消，文檔沒有明確的說明。
      【總】以上四個，是w3c提供的觸摸事件，只針對觸摸設備，最常用的是前三個。
      由於觸摸會導致屏幕動來動去，所以可以會在這些事件的事件處理函數內使用event.preventDefault()
      ，來阻止屏幕的默認滾動。
  • 除了常用的DOM屬性，觸摸事件還包含下列三個用於跟蹤觸摸的屬性。
    • touches：表示當前跟蹤的觸摸操作的touch對象的數組。
      當一個手指在觸屏上時，event.touches.length=1,
      當兩個手指在觸屏上時，event.touches.length=2，以此類推。
    • targetTouches：特定於事件目標的touch對象數組。
      因為touch事件是會冒泡的，所以利用這個屬性指出目標對象。
    • changedTouches：表示自上次觸摸以來發生了什麽改變的touch對象的數組。
      每個touch對象都包含下列幾個屬性：
    • clientX：觸摸目標在視口中的x坐標。
      clientY：觸摸目標在視口中的y坐標。
      identifier：標識觸摸的唯一ID。
      pageX：觸摸目標在頁面中的x坐標。
      pageY：觸摸目標在頁面中的y坐標。
      screenX：觸摸目標在屏幕中的x坐標。
      screenY：觸摸目標在屏幕中的y坐標。
      target：觸摸的DOM節點目標。
      【如何使用呢？】

          EventUtil.addHandler(div,"touchstart",function(event){
              div.innerHTML=event.touches[0].clientX+‘,‘+event.touches[0].clientY;
          });
          EventUtil.addHandler(div,"touchmove",function(event){
              event.preventDefault();
              div.innerHTML=event.touches[0].clientX;
          });
          EventUtil.addHandler(div,"touchend",function(event){
              div.innerHTML=event.changedTouches[0].clientY;
          });
       
      

      使用clientX……時，必須要指明具體的touch對象，而不要直接指明數組。
      event.touches[0]
      在touchend事件處理函數中，當該事件發生時，touches裏面已經沒有任何的touch對象了，此時，就要使用changeTouches集合。

  ---

  • 手勢事件
    • gesturestart：當一個手指已經按在屏幕上，而另一個手指又觸摸在屏幕時觸發。
    • gesturechange：當觸摸屏幕的任何一個手指的位置發生變化時觸發。
    • gestureend：當任何一個手指從屏幕上面移開時觸發。
      【註意】只有兩個手指都觸摸到事件的接收容器時才觸發這些手勢事件。
  • 觸摸事件與手勢事件之間的關系
    1、當一個手指放在屏幕上時，會觸發touchstart事件，如果另一個手指又放在了屏幕上，則會觸發gesturestart事件，隨後觸發基於該手指的touchstart事件。
    2、如果一個或兩個手指在屏幕上滑動，將會觸發gesturechange事件，但只要有一個手指移開，則會觸發gestureend事件，緊接著又會觸發toucheend事件。
  • 手勢的專有屬性
    • rotation：表示手指變化引起的旋轉角度，負值表示逆時針，正值表示順時針，從零開始。
    • scale：表示兩個手指之間的距離情況，向內收縮會縮短距離，這個值從1開始，並隨距離拉大而增長。

JS—觸摸事件、手勢事件