(97)Wangdao.com_第三十天_觸摸事件

觸摸事件

只有觸摸屏纔會引起這一類事件

觸摸事件 和 鼠標事件 同時觸發，即便這個時候並無用到鼠標。

這是爲了讓那些只定義鼠標事件、沒有定義觸摸事件的代碼，在觸摸屏的狀況下仍然能用。

若是想避免這種狀況，能夠用 event.preventDefault 方法阻止發出鼠標事件

Touch            一個觸摸點

TouchList            多個觸摸點的集合

TouchEvent            觸摸引起的事件實例

 

• var touch = new Touch(touchOptions)
• 配置對象可選值

identifier        必需        整數        觸摸點的惟一 ID。
target        必需        元素節點        觸摸點開始時所在的網頁元素。
clientX        可選        數值        觸摸點相對於瀏覽器窗口左上角的水平距離，默認爲0。
clientY        可選        數值        觸摸點相對於瀏覽器窗口左上角的垂直距離，默認爲0。
screenX        可選        數值        觸摸點相對於屏幕左上角的水平距離，默認爲0。
screenY        可選        數值        觸摸點相對於屏幕左上角的垂直距離，默認爲0。
pageX        可選        數值        觸摸點相對於網頁左上角的水平位置（即包括頁面的滾動距離），默認爲0。
pageY        可選        數值        觸摸點相對於網頁左上角的垂直位置（即包括頁面的滾動距離），默認爲0。
radiusX        可選        數值        觸摸點周圍受到影響的橢圓範圍的 X 軸半徑，默認爲0。
radiusY        可選        數值        觸摸點周圍受到影響的橢圓範圍的 Y 軸半徑，默認爲0。
rotationAngle        可選        數值        觸摸區域的橢圓的旋轉角度，單位爲度數，在0到90度之間，默認值爲0。
force        可選        數值        範圍在0到1之間        表示觸摸壓力        0表明沒有壓力，1表明硬件所能識別的最大壓力，默認爲 0

• Touch 接口的實例屬性        var touch = e.changedTouches.item(0);

touch.identifier        

返回一個整數，表示觸摸點的惟一 ID。     

這個值在整個觸摸過程保持不變，直到觸摸事件結束。

touch.force

返回一個0到1之間的數值，表示觸摸壓力。

0表明沒有壓力，1表明硬件所能識別的最大壓力。

touch.target

返回一個元素節點，表明觸摸發生時所在的那個元素節點。

即便觸摸點已經離開了這個節點，該屬性依然不變。

touch.screenX，touch.screenY       

至關於屏幕左上角

touch.clientX，touch.clientY       

至關於瀏覽器窗口左上角

touch.pageX，touch.pageY

至關於整個網頁左上角

touch.radiusX，touch.radiusY       

返回觸摸點周圍受到影響的橢圓範圍的 X 軸半徑和 Y 軸半徑，單位爲像素。

乘以 2 就能夠獲得觸摸範圍的寬度和高度

touch.rotationAngle

表示觸摸區域的橢圓的旋轉角度，單位爲度數，在0到90度之間

• 精準描述 手指觸屏 的橢圓區域

• div.addEventListener('touchstart', rotate);
  div.addEventListener('touchmove', rotate);
  div.addEventListener('touchend', rotate);
  
  function rotate(e) {
      var touch = e.changedTouches.item(0);
      e.preventDefault();
  
      src.style.width = touch.radiusX * 2 + 'px';
      src.style.height = touch.radiusY * 2 + 'px';
      src.style.transform = 'rotate(' + touch.rotationAngle + 'deg)';
  };

• TouchList 接口

表示一組觸摸點的集合。表示全部觸摸點

它的實例是一個相似數組的對象，成員是 Touch 的實例對象

用戶用三根手指觸摸，產生的 TouchList 實例就會包含三個成員，每根手指的觸摸點對應一個 Touch 實例對象

主要經過觸摸事件的 event.touches、event.changedTouches、event.targetTouches 這幾個屬性獲取

• 實例屬性

event.touches.length        

觸摸點的數量

• 實例方法

event.touches.item()        指定位置的成員，它的參數是該成員的位置編號（從零開始）   

event.touches.item(0);  等同於 event.touches[0];

• 瀏覽器原生提供 TouchEvent() 構造函數，用來生成觸摸事件的實例。除了被繼承的屬性之外，它還有一些本身的屬性。

• var touchEvent = new TouchEvent(type, options);
  

第一個參數 是字符串，表示事件類型；

第二個參數是事件的配置對象，該參數是可選的，對象的全部屬性也是可選的。

除了 Event 接口的配置屬性，該接口還有一些本身的配置屬性。

touches        TouchList 實例        表明屏幕上全部的的手指列表，默認值是一個空數組[]。

targetTouches        TouchList 實例        表明全部處在目標元素上的手指列表，默認值是一個空數組[]。

changedTouches        TouchList 實例        表明全部處目標元素 目標事件 上的手指列表 ，默認值是一個空數組[]。

ctrlKey        布爾值        表示 Ctrl 鍵是否同時按下，默認值爲false。

shiftKey        布爾值        表示 Shift 鍵是否同時按下，默認值爲false。

altKey        布爾值        表示 Alt 鍵是否同時按下，默認值爲false。

metaKey        布爾值        表示 Meta 鍵（或 Windows 鍵）是否同時按下，默認值爲false。

• 觸摸事件的種類    event.type

touchstart

用戶開始觸摸時觸發，它的target屬性返回發生觸摸的元素節點。

touchend

用戶再也不接觸觸摸屏時（或者移出屏幕邊緣時）觸發

它的 target 屬性 與 touchstart 事件一致的，就是開始觸摸時所在的元素節點。

它的 changedTouches 屬性返回一個 TouchList 實例，包含全部再也不觸摸的觸摸點（即 Touch 實例對象）。

touchmove

用戶移動觸摸點時觸發，

它的 target 屬性 與 touchstart 事件一致。

若是觸摸的半徑、角度、力度發生變化，也會觸發該事件。

touchcancel

觸摸點取消時觸發

好比在觸摸區域跳出一個模態窗口（modal window）、

觸摸點離開了文檔區域（進入瀏覽器菜單欄）、

用戶的觸摸點太多，超過了支持的上限（自動取消早先的觸摸點）。

• var el = document.getElementsByTagName('canvas')[0];
  el.addEventListener('touchstart', handleStart, false);
  el.addEventListener('touchmove', handleMove, false);
  
  function handleStart(evt) {
      evt.preventDefault();
      var touches = evt.changedTouches;
      for (var i = 0; i < touches.length; i++) {
          console.log(touches[i].pageX, touches[i].pageY);
      };
  };
  
  function handleMove(evt) {
      evt.preventDefault();
      var touches = evt.changedTouches;
      for (var i = 0; i < touches.length; i++) {
          var touch = touches[i];
          console.log(touch.pageX, touch.pageY);
      };
  };