Home >Web Front-end >H5 Tutorial >HTML5 touch event evolution tap event introduction_html5 tutorial skills
HTML5 touch event evolution tap event introduction_html5 tutorial skills
- WBOYOriginal
- 2016-05-16 15:45:252094browse
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 |
<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):
|
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">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.
|
| 事件名称 | 描述（在触摸设备上） |
|---|---|
| MSPointerDown | 触摸开始 |
| MSPointerMove | 接触点移动 |
| MSPointerUp | 触摸结束 |
| MSPointerOver | 触摸点移动到元素内，相当于mouseover |
| MSPointerOut | 触摸点离开元素，相当于mouseout |
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
- (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("你已经长按了");
- },box)
以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
原文地址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server