91精品亚洲,亚欧成人中文字幕一区,中文字幕超碰在线

主頁 > 知識庫 > HTML5觸摸事件演化tap事件介紹

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ā)。事件的目標 `element` 和這個 `touchmove` 事件對應的 `touchstart 事件的目標` `element` 相同，哪怕當 `touchmove` 事件觸發(fā)時，觸點已經(jīng)移出了該 `element` 。	是
touchend	當一個觸點被用戶從觸摸平面上移除（當用戶將一個手指離開觸摸平面）時觸發(fā)。當觸點移出觸摸平面的邊界時也將觸發(fā)。例如用戶將手指劃出屏幕邊緣。已經(jīng)被從觸摸平面上移除的觸點，可以在 `changedTouches 屬性定義的` `TouchList` 中找到。	是
touchenter	當觸點進入某個 `element` 時觸發(fā)。此事件沒有冒泡過程。	是
touchleave	當觸點離開某個 `element` 時觸發(fā)。此事件沒有冒泡過程。	是
touchcancel	當觸點由于某些原因被中斷時觸發(fā)。有幾種可能的原因如下（具體的原因根據(jù)不同的設備和瀏覽器有所不同）：由于某個事件取消了觸摸：例如觸摸過程被一個模態(tài)的彈出框打斷。觸點離開了文檔窗口，而進入了瀏覽器的界面元素、插件或者其他外部內(nèi)容區(qū)域。當用戶產(chǎn)生的觸點個數(shù)超過了設備支持的個數(shù)，從而導致 `TouchList` 中最早的 `Touch` 對象被取消。	是

觸摸對象屬性

`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 相同.` 只讀屬性.
`Touch.force`	手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數(shù). 只讀屬性.
`Touch.radiusY`	能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和 `screenY 相同.` 只讀屬性.
`Touch.target`	當這個觸點最開始被跟蹤時(在 `touchstart` 事件中), 觸點位于的HTML元素. 哪怕在觸點移動過程中, 觸點的位置已經(jīng)離開了這個元素的有效交互區(qū)域, 或者這個元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 `window` 或 `document` 對象. 因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監(jiān)聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 只讀屬性.

IE10+的觸摸事件

IE指針事件
事件名稱	描述（在觸摸設備上）
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事件

XML/HTML Code復制內(nèi)容到剪貼板

(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

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

巨人網(wǎng)絡通訊聲明：本文標題《HTML5觸摸事件演化tap事件介紹》，本文關鍵詞 HTML5,觸摸,事件,演化,tap,；如發(fā)現(xiàn)本文內(nèi)容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權與本站無關。

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

touchstart

touchmove

touchend

touchenter

touchleave

touchcancel