JS—觸摸事件、手勢事件

標籤：一個   head   編寫   mouseover   handler   事件   view   screenx   數組   

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—觸摸事件、手勢事件