HTML5觸控事件演化tap事件介紹_html5教學技巧-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5觸控事件演化tap事件介紹_html5教學技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

html5tap觸摸事件

觸控事件是行動瀏覽器特有的HTML5事件，雖然click事件在pc和行動端更通用，但是在行動裝置上會出現300ms延遲，較為影響使用者體驗，300ms延遲來自判斷雙擊和長按，因為只有預設等待時間結束以確定沒有後續動作發生時，才會觸發click事件。所以觸摸事件反應更快，體驗更好。

觸碰事件的種類：

為了區別觸摸相關的狀態改變，有許多類型的觸摸事件。可以透過檢查觸控事件的 TouchEvent.type 屬性來確定目前事件屬於哪種類型。

注意: 在許多情況下，觸控事件和滑鼠事件會同時被觸發（目的是讓沒有對觸控裝置最佳化的程式碼仍然可以在觸控裝置上正常運作）。如果你使用了觸控事件，可以呼叫 event.preventDefault() 來阻止滑鼠事件被觸發。

標準的觸控事件

事件名稱描述包含touches數組

touchstart

當使用者在觸控平面上放置了一個觸點時觸發。事件的目標 element 將是接點位置上的那個目標 element code>

是

touchmove

事件名称	描述	包含touches数组
touchstart	当用户在触摸平面上放置了一个触点时触发。事件的目标 `<font face="NSimsun">element</font>` 将是触点位置上的那个目标 `<font face="NSimsun">element</font>`	是
touchmove	当用户在触摸平面上移动触点时触发。事件的目标 `<font face="NSimsun">element</font>` 和这个`<font face="NSimsun"> touchmove </font>`事件对应的 `<font face="NSimsun">touchstart 事件的目标</font>` `<font face="NSimsun">element</font>` 相同，哪怕当 `<font face="NSimsun">touchmove</font>` 事件触发时，触点已经移出了该 `<font face="NSimsun">element</font>` 。	是
touchend	当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。已经被从触摸平面上移除的触点，可以在 `changedTouches 属性定义的` `TouchList` 中找到。	是
touchenter	当触点进入某个 `<font face="NSimsun">element</font>` 时触发。此事件没有冒泡过程。	是
touchleave	当触点离开某个 `<font face="NSimsun">element</font>` 时触发。此事件没有冒泡过程。	是
touchcancel	当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。当用户产生的触点个数超过了设备支持的个数，从而导致 `<font face="NSimsun">TouchList</font>` 中最早的 `<font face="NSimsun">Touch</font>` 对象被取消。	是

當使用者在觸控平面上移動觸點時觸發。事件的目標 element 和這個 touchmove 事件對應的 touchstart 事件的目標 element 相同，即使 touchmove 事件觸發時，觸點已經移出了該 element 。

是

touchend

當一個觸點被使用者從觸控平面上移除（當使用者將一個手指離開觸控平面）時觸發。當觸點移出觸摸平面的邊界時也會觸發。例如使用者將手指劃出螢幕邊緣。已經被從觸控平面上移除的接點，可以在 changedTouches 屬性定義的 TouchList 中找到。

是

touchenter

當觸點進入某個 element 時觸發。此事件沒有冒泡過程。

是

touchleave

觸點離開某個 element 時觸發。此事件沒有冒泡過程。

是

touchcancel

當觸點因某些原因中斷時觸發。有幾個可能的原因如下（具體的原因根據不同的設備和瀏覽器有所不同）：

由於某個事件取消了觸摸：例如觸摸過程被一個模態的彈出框打斷。
觸點離開了文件窗口，而進入了瀏覽器的介面元素、外掛程式或其他外部內容區域。
當使用者產生的接點數超過了裝置支援的數，因而導致 TouchList 中最早的 Touch 物件被取消。

是

觸控物件屬性

Touch.identifier 返回一個可以唯一地識別和觸摸平面接觸的點的值. 這個值在這根手指（或觸摸筆等）所引發的所有事件中保持一致, 直到它離開觸摸平面.

Touch.screenX 觸點相對於螢幕左邊沿的的X座標. 唯讀屬性.

Touch.screenY 觸點相對於螢幕上邊緣的的Y座標. 唯讀屬性.

Touch.clientX 觸點相對於可見視區左邊沿的的X座標. 不包括任何滾動偏移. 只讀屬性.

Touch.clientY 觸點相對於可見視區上邊緣的的Y座標. 不包括任何滾動偏移. 唯讀屬性.

Touch.pageX 觸點相對於HTML文件左邊沿的的X座標. 當存在水平滾動的偏移時,這個值包含了水平滾動的偏移. 唯讀屬性.

Touch.pageY 觸點相對於HTML文件上邊緣的的Y座標. 當存在水平滾動的偏移時, 這個值包含了垂直滾動的偏移. 只讀屬性.

Touch.radiusX 能夠包圍使用者和觸控平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個值的單位和 screenX 相同. 唯讀屬性.

<code>Touch.force 手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數. 只讀屬性.

<code>Touch.radiusY 能夠包圍使用者和觸控平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和 screenY 相同. 唯讀屬性.

<code><code>Touch.target

`<font face="NSimsun">Touch.identifier</font>`	返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指（或触摸笔等）所引发的所有事件中保持一致, 直到它离开触摸平面.
`<font face="NSimsun">Touch.screenX</font>`	触点相对于屏幕左边沿的的X坐标. 只读属性.
`<font face="NSimsun">Touch.screenY</font>`	触点相对于屏幕上边沿的的Y坐标. 只读属性.
`<font face="NSimsun">Touch.clientX</font>`	触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
`<font face="NSimsun">Touch.clientY</font>`	触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
`<font face="NSimsun">Touch.pageX</font>`	触点相对于HTML文档左边沿的的X坐标. `当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移`. 只读属性.
`<font face="NSimsun">Touch.pageY</font>`	触点相对于HTML文档上边沿的的Y坐标. `<font face="NSimsun">当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移</font>`. 只读属性.
`<font face="NSimsun">Touch.radiusX</font>`	能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和`<font face="NSimsun"> screenX 相同. </font>`只读属性.
`<code><font face="NSimsun">Touch.force</font>`	手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
`<code><font face="NSimsun">Touch.radiusY</font>`	能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和`<font face="NSimsun"> screenY 相同. </font>`只读属性.
`<code><code><font face="NSimsun">Touch.target</font>`	当这个触点最开始被跟踪时(在 `<font face="NSimsun">touchstart</font>` 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 `<font face="NSimsun">window</font>` 或 `<font face="NSimsun">document</font>` 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

當這個觸點最開始被追蹤時(在 touchstart 事件中), 接點位於的HTML元素. 就算在接點移動過程中, 觸點的位置已經離開了這個元素的有效互動區域,

或這個元素已經被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 window 或 document 物件.

因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監聽器綁定到這個元素本身, 防止元素被移除後, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 唯讀屬性.

IE指针事件
事件名称	描述（在触摸设备上）
MSPointerDown	触摸开始
MSPointerMove	接触点移动
MSPointerUp	触摸结束
MSPointerOver	触摸点移动到元素内，相当于mouseover
MSPointerOut	触摸点离开元素，相当于mouseout

IE10 的觸控事件

MSPointerEvent屬性

属性	描述
hwTimestamp	创建事件的时间（ms）
isPrimary	标识该指针是不是主指针
pointerId	指针的唯一ID（类似于触摸事件的标识符）
pointerType	一个整数，标识了该事件来自鼠标、手写笔还是手指
pressure	笔的压力，0-255，只有手写笔输入时才可用
rotation	0-359的整数，光标的旋转度（如果支持的话）
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要經過touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同一個點輕觸時間很短。

封裝好的tap和longtap事件

XML/HTML Code複製內容到剪貼簿

(函數() {
var 觸碰開始，觸碰結束；
if (typeof(window.ontouchstart) != '未定義') {
TOUCHSTART = TOUCHEND
= TOUCHMOVE='touchmove'
'touchmove'='touchmove'
TOUCHSTART
TOUCHEND =
TOUCHMOVE='MSPointerMMf> } 其他 {
觸碰開始 = 'mousedown' TOUCHEND =
'mouseup' =
= ？觸碰移動 = 'mousemove'

}

函數 NodeTouch(node) {

= 節點； = 節點； = 節點； = 節點；
x
e
y
= e

}）；

node.addEventListener(TOUCHEND, function(e) {
e.stopPropagation();
e.preventDefault();
var curx = e = e
var cury = e
if (Math.abs(curx - x) y ) 6) {
開始時間=0=00 >=0,in_dis=false
=false
; node.addEventListener(TOUCHSTART, function(e) { x
= e = e y
= e
startTime=(new Date()).getTime(); }）；
node.addEventListener(TOUCHEND, function(e) {
e.stopPropagation();
e.preventDefault();
var curx = e = e
var cury = e
if (Math.abs(curx - x) y ) 6) {
in_dis=in_dis=in_dis
in_dis=in_dis
in_dis
}
endTime=(new Date()).getTime(); if (endTime - startTime
>
NodeTouch.prototype.on = 函數
var scopeObj;
var x,y;
if (!scope) {
scopeObj = 這
範圍scopeObj = }
if (
=== '點選') { === '點選') { 點>

evt

=== 'longtap'){

longTap(this._node,callback,scope);
} 其他 {
this._node.addEventListener(evt, function() {
callback.apply（範圍，參數）；
});
}
返回此；
}
窗口。 $ = 函數（選擇器） {
var 節點 = if （節點） {
與新的 NodeTouch(node);
} 其他 {
返回 null；
}
}
})();
var
=$("#box"); box.on("longtap",function(){
console.log("你已經長按了");
}，方框）

以上這篇HTML5觸摸事件接下來tap事件介紹就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。