[TOC] ## 觸摸 ### 觸摸事件 * `touchstart`：用戶開始觸摸時觸發，它的`target`屬性返回發生觸摸的元素節點。 * `touchend`：用戶不再接觸觸摸屏時（或者移出屏幕邊緣時）觸發，它的`target`屬性與`touchstart`事件一致的，就是開始觸摸時所在的元素節點。它的`changedTouches`屬性返回一個`TouchList`實例，包含所有不再觸摸的觸摸點（即`Touch`實例對象）。 * `touchmove`：用戶移動觸摸點時觸發，它的`target`屬性與`touchstart`事件一致。如果觸摸的半徑、角度、力度發生變化，也會觸發該事件。 * `touchcancel`：觸摸點取消時觸發，比如在觸摸區域跳出一個模態窗口（modal window）、觸摸點離開了文檔區域（進入瀏覽器菜單欄）、用戶的觸摸點太多，超過了支持的上限（自動取消早先的觸摸點）。 ### Touch 接口 * `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.identifier 其他類似 選取一個講解 ``` someElement.addEventListener('touchmove', function (e) { for (var i = 0; i < e.changedTouches.length; i++) { console.log(e.changedTouches[i].identifier); } }, false); ``` ### TouchList 接口 成員是`Touch`的實例對 ``` div.addEventListener('touchstart', rotate); function rotate(e) { alert(e.targetTouches); //targetTouches與changedTouches 都是TouchList alert(e.changedTouches); }; ``` ### TouchEvent 接口 * `touches`：`TouchList`實例，代表所有的當前處于活躍狀態的觸摸點，默認值是一個空數組`[]`。 * `targetTouches`：`TouchList`實例，代表所有處在觸摸的目標元素節點內部、且仍然處于活動狀態的觸摸點，默認值是一個空數組`[]`。 * `changedTouches`：`TouchList`實例，代表本次觸摸事件的相關觸摸點，默認值是一個空數組`[]`。 * `ctrlKey`：布爾值，表示 Ctrl 鍵是否同時按下，默認值為`false`。 * `shiftKey`：布爾值，表示 Shift 鍵是否同時按下，默認值為`false`。 * `altKey`：布爾值，表示 Alt 鍵是否同時按下，默認值為`false`。 * `metaKey`：布爾值，表示 Meta 鍵（或 Windows 鍵）是否同時按下，默認值為`false`。 #### TouchEvent.touches 處于活動的觸摸點,返回數組 ``` someElement.addEventListener('touchstart', function (e) { switch (e.touches.length) { // 一根手指觸摸 case 1: handle_one_touch(e); break; // 兩根手指觸摸 case 2: handle_two_touches(e); break; // 三根手指觸摸 case 3: handle_three_touches(e); break; // 其他情況 default: console.log('Not supported'); break; } }, false); ``` ## 實例