主頁(yè) > 知識(shí)庫(kù) > HTML5觸摸事件演化tap事件介紹

HTML5觸摸事件演化tap事件介紹
熱門(mén)標(biāo)簽：電話機(jī)器人如何 貸款電銷(xiāo)人工和機(jī)器人哪個(gè)好 聯(lián)通400電話申請(qǐng) 電視購(gòu)物電銷(xiāo)外呼系統(tǒng) 飛亞外呼系統(tǒng) 高德地圖標(biāo)注賓館位置 杭州營(yíng)銷(xiāo)電銷(xiāo)機(jī)器人供應(yīng)商 西寧智能外呼系統(tǒng)加盟 百應(yīng)電銷(xiāo)機(jī)器人產(chǎn)業(yè)

觸摸事件是移動(dòng)瀏覽器特有的HTML5事件，雖然click事件在pc和移動(dòng)端更通用，但是在移動(dòng)端會(huì)出現(xiàn)300ms延遲，較為影響用戶體驗(yàn)，300ms延遲來(lái)自判斷雙擊和長(zhǎng)按，因?yàn)橹挥心J(rèn)等待時(shí)間結(jié)束以確定沒(méi)有后續(xù)動(dòng)作發(fā)生時(shí)，才會(huì)觸發(fā)click事件。所以觸摸事件反應(yīng)更快，體驗(yàn)更好。

觸摸事件的類(lèi)型：

為了區(qū)別觸摸相關(guān)的狀態(tài)改變，存在多種類(lèi)型的觸摸事件?？梢酝ㄟ^(guò)檢查觸摸事件的 TouchEvent.type 屬性來(lái)確定當(dāng)前事件屬于哪種類(lèi)型。

注意: 在很多情況下，觸摸事件和鼠標(biāo)事件會(huì)同時(shí)被觸發(fā)（目的是讓沒(méi)有對(duì)觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作）。如果你使用了觸摸事件，可以調(diào)用 event.preventDefault() 來(lái)阻止鼠標(biāo)事件被觸發(fā)。

標(biāo)準(zhǔn)的觸摸事件

事件名稱(chēng) 描述 包含touches數(shù)組

touchstart

 當(dāng)用戶在觸摸平面上放置了一個(gè)觸點(diǎn)時(shí)觸發(fā)。事件的目標(biāo) element 將是觸點(diǎn)位置上的那個(gè)目標(biāo) element 是

touchmove

當(dāng)用戶在觸摸平面上移動(dòng)觸點(diǎn)時(shí)觸發(fā)。

事件的目標(biāo) element 和這個(gè) touchmove 事件對(duì)應(yīng)的 touchstart 事件的目標(biāo) element 相同，

哪怕當(dāng) touchmove 事件觸發(fā)時(shí)，觸點(diǎn)已經(jīng)移出了該 element 。

 是

touchend

當(dāng)一個(gè)觸點(diǎn)被用戶從觸摸平面上移除（當(dāng)用戶將一個(gè)手指離開(kāi)觸摸平面）時(shí)觸發(fā)。

當(dāng)觸點(diǎn)移出觸摸平面的邊界時(shí)也將觸發(fā)。例如用戶將手指劃出屏幕邊緣。

已經(jīng)被從觸摸平面上移除的觸點(diǎn)，可以在 changedTouches 屬性定義的 TouchList 中找到。

 是

touchenter

 當(dāng)觸點(diǎn)進(jìn)入某個(gè) element 時(shí)觸發(fā)。此事件沒(méi)有冒泡過(guò)程。 是

touchleave

 當(dāng)觸點(diǎn)離開(kāi)某個(gè) element 時(shí)觸發(fā)。此事件沒(méi)有冒泡過(guò)程。 是

touchcancel

當(dāng)觸點(diǎn)由于某些原因被中斷時(shí)觸發(fā)。有幾種可能的原因如下（具體的原因根據(jù)不同的設(shè)備和瀏覽器有所不同）：

  • 由于某個(gè)事件取消了觸摸：例如觸摸過(guò)程被一個(gè)模態(tài)的彈出框打斷。
  • 觸點(diǎn)離開(kāi)了文檔窗口，而進(jìn)入了瀏覽器的界面元素、插件或者其他外部?jī)?nèi)容區(qū)域。
  • 當(dāng)用戶產(chǎn)生的觸點(diǎn)個(gè)數(shù)超過(guò)了設(shè)備支持的個(gè)數(shù)，從而導(dǎo)致 TouchList 中最早的 Touch 對(duì)象被取消。
 是

觸摸對(duì)象屬性

Touch.identifier 返回一個(gè)可以唯一地識(shí)別和觸摸平面接觸的點(diǎn)的值. 這個(gè)值在這根手指（或觸摸筆等）所引發(fā)的所有事件中保持一致, 直到它離開(kāi)觸摸平面.
Touch.screenX 觸點(diǎn)相對(duì)于屏幕左邊沿的的X坐標(biāo). 只讀屬性.
Touch.screenY 觸點(diǎn)相對(duì)于屏幕上邊沿的的Y坐標(biāo). 只讀屬性.
Touch.clientX 觸點(diǎn)相對(duì)于可見(jiàn)視區(qū)左邊沿的的X坐標(biāo). 不包括任何滾動(dòng)偏移. 只讀屬性.
Touch.clientY 觸點(diǎn)相對(duì)于可見(jiàn)視區(qū)上邊沿的的Y坐標(biāo). 不包括任何滾動(dòng)偏移. 只讀屬性.
Touch.pageX 觸點(diǎn)相對(duì)于HTML文檔左邊沿的的X坐標(biāo). 當(dāng)存在水平滾動(dòng)的偏移時(shí), 這個(gè)值包含了水平滾動(dòng)的偏移. 只讀屬性.
Touch.pageY 觸點(diǎn)相對(duì)于HTML文檔上邊沿的的Y坐標(biāo). 當(dāng)存在水平滾動(dòng)的偏移時(shí), 這個(gè)值包含了垂直滾動(dòng)的偏移. 只讀屬性.
Touch.radiusX 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個(gè)值的單位和 screenX 相同. 只讀屬性.
Touch.force 手指擠壓觸摸平面的壓力大小, 從0.0(沒(méi)有壓力)到1.0(最大壓力)的浮點(diǎn)數(shù). 只讀屬性.
Touch.radiusY 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個(gè)值的單位和 screenY 相同. 只讀屬性.
Touch.target

當(dāng)這個(gè)觸點(diǎn)最開(kāi)始被跟蹤時(shí)(在 touchstart 事件中), 觸點(diǎn)位于的HTML元素. 哪怕在觸點(diǎn)移動(dòng)過(guò)程中, 觸點(diǎn)的位置已經(jīng)離開(kāi)了這個(gè)元素的有效交互區(qū)域,

或者這個(gè)元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個(gè)元素在觸摸過(guò)程中被移除, 這個(gè)事件仍然會(huì)指向它, 但是不會(huì)再冒泡這個(gè)事件到 window 或 document 對(duì)象.

因此, 如果有元素在觸摸過(guò)程中可能被移除, 最佳實(shí)踐是將觸摸事件的監(jiān)聽(tīng)器綁定到這個(gè)元素本身, 防止元素被移除后, 無(wú)法再?gòu)乃纳弦患?jí)元素上偵測(cè)到從該元素冒泡的事件. 只讀屬性.

 

IE10+的觸摸事件

IE指針事件
事件名稱(chēng) 描述（在觸摸設(shè)備上）
MSPointerDown 觸摸開(kāi)始
MSPointerMove 接觸點(diǎn)移動(dòng)
MSPointerUp 觸摸結(jié)束
MSPointerOver 觸摸點(diǎn)移動(dòng)到元素內(nèi)，相當(dāng)于mouseover
MSPointerOut 觸摸點(diǎn)離開(kāi)元素，相當(dāng)于mouseout

 

MSPointerEvent屬性

屬性 描述
hwTimestamp 創(chuàng)建事件的時(shí)間（ms）
isPrimary 標(biāo)識(shí)該指針是不是主指針
pointerId 指針的唯一ID（類(lèi)似于觸摸事件的標(biāo)識(shí)符）
pointerType 一個(gè)整數(shù)，標(biāo)識(shí)了該事件來(lái)自鼠標(biāo)、手寫(xiě)筆還是手指
pressure 筆的壓力，0-255，只有手寫(xiě)筆輸入時(shí)才可用
rotation 0-359的整數(shù)，光標(biāo)的旋轉(zhuǎn)度（如果支持的話）
tiltX/tiltY 手寫(xiě)筆的傾斜度，只有用手寫(xiě)筆輸入時(shí)才支持

 

等價(jià)事件

鼠標(biāo) 觸摸 鍵盤(pán)
mousedown touchstart keydown
mousemove touchmove keydown
mouseup touchend keyup
mouseover   focus

 

很顯然，觸摸動(dòng)作序列：touchstart-touchmove-touchend和鼠標(biāo)序 列：mousedown-mousemove-mouseup以及鍵盤(pán)序列：keydown-keypress-keyup很相似，這并不是巧合，因?yàn)檫@ 三種交互模式都可以描述為start-move-stop。

話說(shuō)回來(lái)，click要經(jīng)過(guò)touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同一個(gè)點(diǎn)輕觸時(shí)間很短。

封裝好的tap和longtap事件

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. (function() {    
  2.     var TOUCHSTART, TOUCHEND;    
  3.     if (typeof(window.ontouchstart) != 'undefined') {    
  4.         TOUCHSTART = 'touchstart';    
  5.         TOUCHEND = 'touchend';    
  6.         TOUCHMOVE='touchmove';    
  7.      
  8.     } else if (typeof(window.onmspointerdown) != 'undefined') {    
  9.         TOUCHSTART = 'MSPointerDown';    
  10.         TOUCHEND = 'MSPointerUp';    
  11.         TOUCHMOVE='MSPointerMove';    
  12.     } else {    
  13.         TOUCHSTART = 'mousedown';    
  14.         TOUCHEND = 'mouseup';    
  15.         TOUCHMOVE = 'mousemove';    
  16.     }    
  17.     function NodeTouch(node) {    
  18.         this._node = node;    
  19.     }    
  20.     function tap(node,callback,scope) {    
  21.         node.addEventListener(TOUCHSTART, function(e) {    
  22.             x = e.touches[0].pageX;    
  23.             y = e.touches[0].pageY;    
  24.         });    
  25.         node.addEventListener(TOUCHEND, function(e) {    
  26.             e.stopPropagation();    
  27.             e.preventDefault();    
  28.             var curx = e.changedTouches[0].pageX;    
  29.             var cury = e.changedTouches[0].pageY;    
  30.             if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
  31.                 callback.apply(scope, arguments);    
  32.             }    
  33.         });    
  34.     }    
  35.     function longTap(node,callback,scope) {    
  36.         var x,y,startTime=0,endTime=0,in_dis=false;    
  37.         node.addEventListener(TOUCHSTART, function(e) {    
  38.             x = e.touches[0].pageX;    
  39.             y = e.touches[0].pageY;    
  40.             startTime=(new Date()).getTime();    
  41.         });    
  42.         node.addEventListener(TOUCHEND, function(e) {    
  43.             e.stopPropagation();    
  44.             e.preventDefault();    
  45.             var curx = e.changedTouches[0].pageX;    
  46.             var cury = e.changedTouches[0].pageY;    
  47.             if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    
  48.                 in_dis=true;    
  49.             }else{    
  50.                 in_dis=false;    
  51.             }    
  52.             endTime=(new Date()).getTime();    
  53.             if (endTime - startTime > 300 && in_dis) {    
  54.                 callback.apply(scope, arguments);    
  55.             }    
  56.         });    
  57.     }    
  58.     NodeTouch.prototype.on = function(evt, callback, scope) {    
  59.         var scopeObj;    
  60.         var x,y;    
  61.         if (!scope) {    
  62.             scopeObj = this._node;    
  63.         } else {    
  64.             scopescopeObj = scope;    
  65.         }    
  66.         if (evt === 'tap') {    
  67.             tap(this._node,callback,scope);    
  68.         } else if(evt === 'longtap'){    
  69.             longTap(this._node,callback,scope);    
  70.         } else {    
  71.             this._node.addEventListener(evt, function() {    
  72.                 callback.apply(scope, arguments);    
  73.             });    
  74.         }    
  75.         return this;    
  76.     }    
  77.     window.$ = function(selector) {    
  78.         var node = document.querySelector(selector);    
  79.         if (node) {    
  80.             return new NodeTouch(node);    
  81.         } else {    
  82.             return null;    
  83.         }    
  84.     }    
  85. })();    
  86. var box=$("#box");    
  87. box.on("longtap",function(){    
  88.     console.log("你已經(jīng)長(zhǎng)按了");    
  89. },box)  

以上這篇HTML5觸摸事件演化tap事件介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html

標(biāo)簽：煙臺(tái) 安慶 邯鄲 內(nèi)蒙古 撫州 牡丹江 玉溪 晉中

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5觸摸事件演化tap事件介紹》，本文關(guān)鍵詞  HTML5,觸摸,事件,演化,tap,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5觸摸事件演化tap事件介紹》相關(guān)的同類(lèi)信息！
  • 本頁(yè)收集關(guān)于HTML5觸摸事件演化tap事件介紹的相關(guān)信息資訊供網(wǎng)民參考！

    • 四合一精品企业网站建设

    多一个网站就为企业多增加一条营销渠道

    ¥888元限时抢购

    QQ立即咨询快速购买

    企业400电话

    智能AI客服机器人
    ￥15000

    在线订购

    合计11份范本：公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推薦文章