Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > body text

HTML5 touch event evolution tap event introduction_html5 tutorial skills

WBOY
Release： 2016-05-16 15:45:25
Original
2080 people have browsed it

Touch events are HTML5 events unique to mobile browsers. Although click events are more common on PC and mobile terminals, there will be a 300ms delay on the mobile terminal, which affects the user experience. The 300ms delay comes from judging double clicks and long presses, because only The click event will not be triggered until the default waiting time has elapsed to ensure that no subsequent actions occur. So the touch event response is faster and the experience is better.

Type of touch event:

In order to distinguish touch-related state changes, there are multiple types of touch events. You can determine what type the current event is by examining the touch event's <font face="NSimsun">TouchEvent.type</font> attribute.

Note: In many cases, touch events and mouse events will be triggered at the same time (the purpose is to allow code that is not optimized for touch devices to still work normally on touch devices). If you use touch events, you can call <font face="NSimsun">event.preventDefault()</font> to prevent mouse events from being triggered.

Standard touch events

Event name Description Contains touches array

touchstart

 Fired when the user places a touch point on the touch surface. The target of the event <font face="NSimsun">element</font> will be the target <font face="NSimsun">element</font> at the touch location code> Yes

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> 对象被取消。
 是
Fired when the user moves a contact point on the touch surface. The target of the event <font face="NSimsun">element</font> corresponds to this <font face="NSimsun"> touchmove </font> event The target of the <font face="NSimsun">touchstart event</font> is the same as the <font face="NSimsun">element</font> , Even when the <font face="NSimsun">touchmove</font> event is triggered, the touch point has moved out of the <font face="NSimsun">element</font>. 		Yes

touchend

 Fired when a touch point is removed from the touch surface by the user (when the user lifts a finger off the touch surface). Also triggered when the contact moves outside the bounds of the touch plane. For example, the user draws their finger out of the edge of the screen. Touches that have been removed from the touch plane can be found in the changedTouches attribute defined in the TouchList . Yes

touchenter

 Triggered when a contact enters an <font face="NSimsun">element</font>. This event has no bubbling process. Yes

touchleave

 Fired when a contact leaves an <font face="NSimsun">element</font>. This event has no bubbling process. Yes

touchcancel

 Fired when a contact is interrupted for some reason. There are several possible reasons as follows (specific reasons vary by device and browser):
  • The touch was canceled due to an event: for example, the touch process was interrupted by a modal pop-up box.
  • The touch point leaves the document window and enters the browser's interface elements, plug-ins, or other external content areas.
  • When the number of touch points generated by the user exceeds the number supported by the device, resulting in the earliest <font face="NSimsun">TouchList</font> ="NSimsun">Touch object is cancelled.
Yes

Touch object properties

<font face="NSimsun">Touch.identifier</font> Returns a value that uniquely identifies the point in contact with the touch plane. This value remains consistent across all events triggered by this finger (or stylus, etc.) until it leaves the touch plane.
<font face="NSimsun">Touch.screenX</font> The X coordinate of the touch point relative to the left edge of the screen. Read-only property.
<font face="NSimsun">Touch.screenY</font> The Y coordinate of the touch point relative to the upper edge of the screen. Read-only property.
<font face="NSimsun">Touch.clientX</font> The X coordinate of the touch point relative to the left edge of the visible viewport. Does not include any scroll offset. Read-only property.
<font face="NSimsun">Touch.clientY</font> The Y coordinate of the touch point relative to the top edge of the visible viewport. Does not include any scroll offset. Read-only property.
<font face="NSimsun">Touch.pageX</font> The X coordinate of the touch point relative to the left edge of the HTML document. When there is a horizontalscrollingoffset, This value contains the horizontal scroll offset. Read-only property.
<font face="NSimsun">Touch.pageY</font> The Y coordinate of the touch point relative to the top edge of the HTML document. <font face="NSimsun">When there is a horizontal scroll offset, this value includes the vertical scroll offset</font>. <strong>Read-only attribute.</strong>
<font face="NSimsun">Touch.radiusX</font> The horizontal axis (X-axis) radius of the smallest ellipse that can enclose the contact surface between the user and the touch surface. The unit of this value is the same as <font face="NSimsun"> screenX. </font>Read-only attribute.
<code><font face="NSimsun">Touch.force</font> The amount of pressure the finger presses on the touch surface, a floating point number from 0.0 (no pressure) to 1.0 (maximum pressure). Read-only property.
<code><font face="NSimsun">Touch.radiusY</font> The vertical axis (Y-axis) radius of the smallest ellipse that can enclose the contact surface between the user and the touch surface. The unit of this value is the same as <font face="NSimsun"> screenY. </font>Read-only attribute.
<code><code><font face="NSimsun">Touch.target</font>
<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> 对象.

因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.
When this touch point is initially tracked (in the <font face="NSimsun">touchstart</font> event), the touch point is located in the HTML element. Even if the touch point moves During the process, the position of the touch point has left the effective interaction area of ​​this element,

Or this element has been removed from the document. It should be noted that if this element is removed during the touch process, this event will still point to it, but this event will no longer bubble up to window or <font face="NSimsun">document</font> object.

Therefore, if there is an element that may be removed during the touch process, the best practice is to bind the touch event listener to the element itself to prevent the element from being removed from its parent element. An event was detected bubbling up from this element. Read-only attribute.

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

MSPointerEvent Property

属性 描述
hwTimestamp 创建事件的时间（ms）
isPrimary 标识该指针是不是主指针
pointerId 指针的唯一ID（类似于触摸事件的标识符）
pointerType 一个整数，标识了该事件来自鼠标、手写笔还是手指
pressure 笔的压力，0-255，只有手写笔输入时才可用
rotation 0-359的整数，光标的旋转度（如果支持的话）
tiltX/tiltY 手写笔的倾斜度，只有用手写笔输入时才支持

Equivalent events

鼠标 触摸 键盘
mousedown touchstart keydown
mousemove touchmove keydown
mouseup touchend keyup
mouseover   focus

Obviously, the touch action sequence: touchstart-touchmove-touchend and the mouse sequence: mousedown-mousemove-mouseup and the keyboard sequence: keydown-keypress-keyup are very similar. This is not a coincidence, because all three interaction patterns can be described for start-move-stop.

Having said that, click needs to go through the touchstart-touchmove-touchend process, with a 300ms delay, so a tap event is needed. Tap means touching the same point for a short time.

Encapsulated tap and longtap events

XML/HTML CodeCopy content to clipboard
  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("你已经长按了");    
  89. },box)  

以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

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

Related labels：
html5 tap touch event
source：php.cn
Previous article：Examples to explain how to use HTML5 Canvas API to operate graphics rotation_html5 tutorial skills Next article：Detailed explanation of how to realize translation and rotation changes of images through HTML5 Canvas_html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template