HTML5觸摸事件演化tap事件介紹

2020-03-24 18:02:47

字體：大中小

供稿：網(wǎng)友

觸摸事件是移動瀏覽器特有的HTML5事件，雖然click事件在pc和移動端更通用，但是在移動端會出現(xiàn)300ms延遲，較為影響用戶體驗，300ms延遲來自判斷雙擊和長按，因為只有默認(rèn)等待時間結(jié)束以確定沒有后續(xù)動作發(fā)生時，才會觸發(fā)click事件。所以觸摸事件反應(yīng)更快，體驗更好。觸摸事件的類型：為了區(qū)別觸摸相關(guān)的狀態(tài)改變，存在多種類型的觸摸事件。可以通過檢查觸摸事件的TouchEvent.type屬性來確定當(dāng)前事件屬于哪種類型。注意:在很多情況下，觸摸事件和鼠標(biāo)事件會同時被觸發(fā)（目的是讓沒有對觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作）。如果你使用了觸摸事件，可以調(diào)用event.preventDefault()來阻止鼠標(biāo)事件被觸發(fā)。標(biāo)準(zhǔn)的觸摸事件
當(dāng)用戶在觸摸平面上放置了一個觸點(diǎn)時觸發(fā)。事件的目標(biāo)element將是觸點(diǎn)位置上的那個目標(biāo)element
當(dāng)用戶在觸摸平面上移動觸點(diǎn)時觸發(fā)。事件的目標(biāo)element和這個touchmove事件對應(yīng)的touchstart 事件的目標(biāo)element相同，哪怕當(dāng)touchmove事件觸發(fā)時，觸點(diǎn)已經(jīng)移出了該element。
當(dāng)一個觸點(diǎn)被用戶從觸摸平面上移除（當(dāng)用戶將一個手指離開觸摸平面）時觸發(fā)。當(dāng)觸點(diǎn)移出觸摸平面的邊界時也將觸發(fā)。例如用戶將手指劃出屏幕邊緣。已經(jīng)被從觸摸平面上移除的觸點(diǎn)，可以在changedTouches 屬性定義的TouchList中找到。
當(dāng)觸點(diǎn)由于某些原因被中斷時觸發(fā)。有幾種可能的原因如下（具體的原因根據(jù)不同的設(shè)備和瀏覽器有所不同）：由于某個事件取消了觸摸：例如觸摸過程被一個模態(tài)的彈出框打斷。觸點(diǎn)離開了文檔窗口，而進(jìn)入了瀏覽器的界面元素、插件或者其他外部內(nèi)容區(qū)域。當(dāng)用戶產(chǎn)生的觸點(diǎn)個數(shù)超過了設(shè)備支持的個數(shù)，從而導(dǎo)致TouchList中最早的Touch對象被取消。
Touch.identifier 返回一個可以唯一地識別和觸摸平面接觸的點(diǎn)的值. 這個值在這根手指（或觸摸筆等）所引發(fā)的所有事件中保持一致, 直到它離開觸摸平面.
Touch.pageX 觸點(diǎn)相對于HTML文檔左邊沿的的X坐標(biāo).當(dāng)存在水平滾動的偏移時, 這個值包含了水平滾動的偏移.只讀屬性.
Touch.pageY 觸點(diǎn)相對于HTML文檔上邊沿的的Y坐標(biāo).當(dāng)存在水平滾動的偏移時, 這個值包含了垂直滾動的偏移.只讀屬性.
Touch.radiusX 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個值的單位和screenX 相同.只讀屬性.
Touch.force 手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點(diǎn)數(shù).只讀屬性.
Touch.radiusY 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和screenY 相同.只讀屬性.
當(dāng)這個觸點(diǎn)最開始被跟蹤時(在touchstart事件中), 觸點(diǎn)位于的html' target='_blank'>HTML元素. 哪怕在觸點(diǎn)移動過程中, 觸點(diǎn)的位置已經(jīng)離開了這個元素的有效交互區(qū)域, 或者這個元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到window或document對象. 因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監(jiān)聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件.只讀屬性.
很顯然，觸摸動作序列：touchstart-touchmove-touchend和鼠標(biāo)序列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這并不是巧合，因為這三種交互模式都可以描述為start-move-stop。話說回來，click要經(jīng)過touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同一個點(diǎn)輕觸時間很短。封裝好的tap和longtap事件XML/HTML Code復(fù)制內(nèi)容到剪貼板
(function(){ varTOUCHSTART,TOUCHEND; if(typeof(window.ontouchstart)!='undefined'){ TOUCHSTART='touchstart'; TOUCHEND='touchend'; TOUCHMOVE='touchmove'; }elseif(typeof(window.onmspointerdown)!='undefined'){ TOUCHSTART='MSPointerDown'; TOUCHEND='MSPointerUp'; TOUCHMOVE='MSPointerMove'; }else{ TOUCHSTART='mousedown'; TOUCHEND='mouseup'; TOUCHMOVE='mousemove'; } functionNodeTouch(node){ this._node=node; } functiontap(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(); varcurx=e.changedTouches[0].pageX; varcury=e.changedTouches[0].pageY; if(Math.abs(curx-x) 6 Math.abs(cury-y) 6){ callback.apply(scope,arguments); } }); } functionlongTap(node,callback,scope){ varx,y,startTime=0,endTime=0,in_dis=false; node.addEventListener(TOUCHSTART,function(e){ x=e.touches[0].pageX; y=e.touches[0].pageY; startTime=(newDate()).getTime(); }); node.addEventListener(TOUCHEND,function(e){ e.stopPropagation(); e.preventDefault(); varcurx=e.changedTouches[0].pageX; varcury=e.changedTouches[0].pageY; if(Math.abs(curx-x) 6 Math.abs(cury-y) 6){ in_dis=true; }else{ in_dis=false; } endTime=(newDate()).getTime(); if(endTime-startTime 300 in_dis){ callback.apply(scope,arguments); } }); } NodeTouch.prototype.on=function(evt,callback,scope){ varscopeObj; varx,y; if(!scope){ scopeObj=this._node; }else{ scopescopeObj=scope; } if(evt==='tap'){ tap(this._node,callback,scope); }elseif(evt==='longtap'){ longTap(this._node,callback,scope); }else{ this._node.addEventListener(evt,function(){ callback.apply(scope,arguments); }); } returnthis; } window.$=function(selector){ varnode=document.querySelector(selector); if(node){ returnnewNodeTouch(node); }else{ returnnull; } } })(); varbox=$( #box box.on( longtap ,function(){ console.log( 你已經(jīng)長按了 },box)
以上這篇HTML5觸摸事件演化tap事件介紹就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.htmlhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：關(guān)于HTML中常見的其它標(biāo)簽的詳細(xì)介紹

下一篇：讓ie瀏覽器成為支持html5的瀏覽器的解決方法(使用html5shiv)