HTML5觸摸事件演化tap事件介紹
我要評論觸摸事件是移動瀏覽器特有的HTML5事件，雖然click事件在pc和移動端更通用，但是在移動端會出現(xiàn)300ms延遲，較為影響用戶體驗，300ms延遲來自判斷雙擊和長按，因為只有默認等待時間結束以確定沒有后續(xù)動作發(fā)生時，才會觸發(fā)click事件。所以觸摸事件反應更快，體驗更好。
觸摸事件的類型：
為了區(qū)別觸摸相關的狀態(tài)改變，存在多種類型的觸摸事件?？梢酝ㄟ^檢查觸摸事件的 TouchEvent.type 屬性來確定當前事件屬于哪種類型。
注意: 在很多情況下，觸摸事件和鼠標事件會同時被觸發(fā)（目的是讓沒有對觸摸設備優(yōu)化的代碼仍然可以在觸摸設備上正常工作）。如果你使用了觸摸事件，可以調(diào)用 event.preventDefault() 來阻止鼠標事件被觸發(fā)。
標準的觸摸事件
| 事件名稱 | 描述 | 包含touches數(shù)組 |
touchstart |
當用戶在觸摸平面上放置了一個觸點時觸發(fā)。事件的目標 element 將是觸點位置上的那個目標 element |
是 |
touchmove |
當用戶在觸摸平面上移動觸點時觸發(fā)。 事件的目標 哪怕當 |
是 |
touchend |
當一個觸點被用戶從觸摸平面上移除（當用戶將一個手指離開觸摸平面）時觸發(fā)。 當觸點移出觸摸平面的邊界時也將觸發(fā)。例如用戶將手指劃出屏幕邊緣。 已經(jīng)被從觸摸平面上移除的觸點，可以在 |
是 |
touchenter |
當觸點進入某個 element 時觸發(fā)。此事件沒有冒泡過程。 |
是 |
touchleave |
當觸點離開某個 element 時觸發(fā)。此事件沒有冒泡過程。 |
是 |
touchcancel |
當觸點由于某些原因被中斷時觸發(fā)。有幾種可能的原因如下（具體的原因根據(jù)不同的設備和瀏覽器有所不同）：
|
是 |
觸摸對象屬性
Touch.identifier |
返回一個可以唯一地識別和觸摸平面接觸的點的值. 這個值在這根手指（或觸摸筆等）所引發(fā)的所有事件中保持一致, 直到它離開觸摸平面. |
Touch.screenX |
觸點相對于屏幕左邊沿的的X坐標. 只讀屬性. |
Touch.screenY |
觸點相對于屏幕上邊沿的的Y坐標. 只讀屬性. |
Touch.clientX |
觸點相對于可見視區(qū)左邊沿的的X坐標. 不包括任何滾動偏移. 只讀屬性. |
Touch.clientY |
觸點相對于可見視區(qū)上邊沿的的Y坐標. 不包括任何滾動偏移. 只讀屬性. |
Touch.pageX |
觸點相對于HTML文檔左邊沿的的X坐標. 當存在水平滾動的偏移時, 這個值包含了水平滾動的偏移. 只讀屬性. |
Touch.pageY |
觸點相對于HTML文檔上邊沿的的Y坐標. 當存在水平滾動的偏移時, 這個值包含了垂直滾動的偏移. 只讀屬性. |
Touch.radiusX |
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個值的單位和 screenX 相同. 只讀屬性. |
|
手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數(shù). 只讀屬性. |
|
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和 screenY 相同. 只讀屬性. |
|
當這個觸點最開始被跟蹤時(在 或者這個元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監(jiān)聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 只讀屬性. |
IE10+的觸摸事件
| 事件名稱 | 描述（在觸摸設備上） |
|---|---|
| MSPointerDown | 觸摸開始 |
| MSPointerMove | 接觸點移動 |
| MSPointerUp | 觸摸結束 |
| MSPointerOver | 觸摸點移動到元素內(nèi)，相當于mouseover |
| MSPointerOut | 觸摸點離開元素，相當于mouseout |
MSPointerEvent屬性
| 屬性 | 描述 |
|---|---|
| hwTimestamp | 創(chuàng)建事件的時間（ms） |
| isPrimary | 標識該指針是不是主指針 |
| pointerId | 指針的唯一ID（類似于觸摸事件的標識符） |
| pointerType | 一個整數(shù)，標識了該事件來自鼠標、手寫筆還是手指 |
| pressure | 筆的壓力，0-255，只有手寫筆輸入時才可用 |
| rotation | 0-359的整數(shù)，光標的旋轉度（如果支持的話） |
| tiltX/tiltY | 手寫筆的傾斜度，只有用手寫筆輸入時才支持 |
等價事件
| 鼠標 | 觸摸 | 鍵盤 |
| mousedown | touchstart | keydown |
| mousemove | touchmove | keydown |
| mouseup | touchend | keyup |
| mouseover | focus |
很顯然，觸摸動作序列：touchstart-touchmove-touchend和鼠標序 列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這并不是巧合，因為這 三種交互模式都可以描述為start-move-stop。
話說回來，click要經(jīng)過touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同一個點輕觸時間很短。
封裝好的tap和longtap事件
- (function() {
- var TOUCHSTART, TOUCHEND;
- if (typeof(window.ontouchstart) != 'undefined') {
- TOUCHSTART = 'touchstart';
- TOUCHEND = 'touchend';
- TOUCHMOVE='touchmove';
- } else if (typeof(window.onmspointerdown) != 'undefined') {
- TOUCHSTART = 'MSPointerDown';
- TOUCHEND = 'MSPointerUp';
- TOUCHMOVE='MSPointerMove';
- } else {
- TOUCHSTART = 'mousedown';
- TOUCHEND = 'mouseup';
- TOUCHMOVE = 'mousemove';
- }
- function NodeTouch(node) {
- this._node = node;
- }
- function tap(node,callback,scope) {
- node.addEventListener(TOUCHSTART, function(e) {
- x = e.touches[0].pageX;
- y = e.touches[0].pageY;
- });
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
- callback.apply(scope, arguments);
- }
- });
- }
- function longTap(node,callback,scope) {
- var x,y,startTime=0,endTime=0,in_dis=false;
- node.addEventListener(TOUCHSTART, function(e) {
- x = e.touches[0].pageX;
- y = e.touches[0].pageY;
- startTime=(new Date()).getTime();
- });
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e.changedTouches[0].pageX;
- var cury = e.changedTouches[0].pageY;
- if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
- in_dis=true;
- }else{
- in_dis=false;
- }
- endTime=(new Date()).getTime();
- if (endTime - startTime > 300 && in_dis) {
- callback.apply(scope, arguments);
- }
- });
- }
- NodeTouch.prototype.on = function(evt, callback, scope) {
- var scopeObj;
- var x,y;
- if (!scope) {
- scopeObj = this._node;
- } else {
- scopescopeObj = scope;
- }
- if (evt === 'tap') {
- tap(this._node,callback,scope);
- } else if(evt === 'longtap'){
- longTap(this._node,callback,scope);
- } else {
- this._node.addEventListener(evt, function() {
- callback.apply(scope, arguments);
- });
- }
- return this;
- }
- window.$ = function(selector) {
- var node = document.querySelector(selector);
- if (node) {
- return new NodeTouch(node);
- } else {
- return null;
- }
- }
- })();
- var box=$("#box");
- box.on("longtap",function(){
- console.log("你已經(jīng)長按了");
- },box)
以上這篇HTML5觸摸事件演化tap事件介紹就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html
相關文章
- 這篇文章主要介紹了html5觸摸事件判斷滑動方向的實現(xiàn)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-05
HTML5觸摸事件實現(xiàn)移動端簡易進度條的實現(xiàn)方法
這篇文章主要介紹了HTML5觸摸事件實現(xiàn)移動端簡易進度條的實現(xiàn)方法的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-04- 這篇文章主要介紹了整理HTML5移動端開發(fā)的常用觸摸事件,觸摸事件的event對象基本上都是按照鼠標操作的屬性進行對應,需要的朋友可以參考下2016-04-15
HTML5觸摸事件(touchstart、touchmove和touchend)的實現(xiàn)
這篇文章主要介紹了HTML5觸摸事件(touchstart、touchmove和touchend)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們2020-05-08