HTML5 touch event evolution tap event introduction _ html5 tutorial skills-

The following is an introduction to the HTML5 touch event evolution tap event. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at the touch event as a HTML5 event unique to mobile browsers. Although the click event is more common on PCs and mobile terminals, there will be a Ms latency on mobile terminals, which affects user experience, ms latency is determined by double-click and long-press, because the click event is triggered only when the default wait time ends to determine that no subsequent action has occurred. Therefore, the touch event response is faster and the experience is better.

Touch event type:

There are multiple types of touch events to differentiate the state changes related to the touch. You can checkTouchEvent.typeAttribute to determine the type of the current event.

Note:In many cases, touch events and mouse events are triggered at the same time (the purpose is to make code that is not optimized for the touch device still work on the touch device ). If you use a touch event, you can callevent.preventDefault()To prevent mouse events from being triggered.

Standard touch events

Event name	Description	Contains the touches Array
Touchstart	Triggered when a user places a contact on the touch plane. Event TargetelementIt will be the target at the contact position.element	Yes
Touchmove	Triggered when the user moves the contact on the touch plane. Event TargetelementAnd this touchmove EventTouchstart event Target elementSame, Even whentouchmoveWhen the event is triggered, the contact has been removed from thiselement.	Yes
Touchend	Triggered when a contact is removed from the touch plane (when the user leaves the touch plane. It is also triggered when the contact is removed from the border of the touch plane. For example, you can draw your finger at the edge of the screen. Contacts that have been removed from the touch plane can beThe changedTouches attribute definesTouchList.	Yes
Touchenter	When the contact enterselement.This event does not have a bubble process.	Yes
Touchleave	When the contact leaveselement.This event does not have a bubble process.	Yes
Touchcancel	Triggered when the contact is interrupted for some reason. There are several possible causes (depending on the device and browser ): Because an event cancels the touch, for example, the touch process is interrupted by a modal pop-up box. The contact leaves the document window and enters the browser's interface elements, plug-ins, or other external content areas. When the number of contacts generated by the user exceeds the number supported by the deviceTouchListThe oldestTouchThe object is canceled.	Yes

Touch Object Attributes

Touch.identifier	Returns the value of a point that uniquely identifies the point in contact with the touch plane. This value remains consistent among all events triggered by this finger (or touch pen, etc.) until it leaves the touch plane.
Touch.screenX	The X coordinate of the contact relative to the left side of the screen.Read-only attribute.
Touch.screenY	Y coordinate of the contact relative to the edge of the screen.Read-only attribute.
Touch.clientX	X coordinate of the contact relative to the left side of the visible area. No scroll offset is included.Read-only attribute.
Touch.clientY	Y coordinate of the contact relative to the edge of the visible area. No scroll offset is included.Read-only attribute.
Touch.pageX	The X coordinate of the contact relative to the left side of the HTML document.When the level existsRollingThis value contains the offset of horizontal scrolling..Read-only attribute.
Touch.pageY	Y coordinate of the contact relative to the edge of the HTML document.When a horizontal scroll offset exists, this value contains the vertical scroll offset..Read-only attribute.
Touch.radiusX	The radius of the horizontal axis (X axis) of the smallest elliptical surface that can enclose the user and the touch plane. The unit of this value andSame as screenX.Read-only attribute.
Touch.force	The pressure on the touch plane of the finger, from 0.0 (no pressure) to 1.0 (maximum pressure) floating point number.Read-only attribute.
Touch.radiusY	The vertical axis (Y axis) radius of the smallest elliptical surface that can enclose the user and the touch plane. The unit of this value andSame as screenY.Read-only attribute.
Touch.target	When this contact is first tracked (touchstartEvent), the contact is located in the HTML element. Even when the contact moves, the contact position has left the valid interaction area of the element, Or this element has been removed from the document. Note that if this element is removed during the touch process, this event will still point to it, but it will not bubble upwindowOrdocumentObject. Therefore, if an element may be removed during the touch process, the best practice is to bind the listener of the touch event to the element itself to prevent the element from being removed, events that bubble from the element cannot be detected from its upper-level element.Read-only attribute.

IE10 + touch events

IE pointer event

Event name	Description (on a touch device)
MSPointerDown	Start with touch
MSPointerMove	Touch point movement
MSPointerUp	Touch ends
MSPointerOver	The touch point moves to the element, which is equivalent to mouseover.
MSPointerOut	Touch Point exit element, equivalent to mouseout

MSPointerEvent attributes

Attribute	Description
HwTimestamp	Time when an event was created (MS)
IsPrimary	Indicates whether the pointer is a master pointer.
PointerId	Unique pointer ID (similar to the identifier of a touch event)
PointerType	An integer that identifies the event from the mouse, pen, or finger
Pressure	Pen pressure, 0-255, only available when writing
Rotation	An integer between 0 and, indicating the rotation of the cursor (if supported)
TiltX/tiltY	The tilt of the Pen. supported only when the pen is input.

Equivalent event

Mouse	Touch	Keyboard
Mousedown	Touchstart	Keydown
Mousemove	Touchmove	Keydown
Mouseup	Touchend	Keyup
Mouseover		Focus

Apparently, the touch action sequence: touchstart-touchmove-touchend is similar to the mouse sequence column: mousedown-mousemove-mouseup and the keyboard sequence: keydown-keypress-keyup. This is not a coincidence, the three interaction modes can be described as start-move-stop.

In other words, the click process must go through the touchstart-touchmove-touchend process, with a latency of Ms. Therefore, the tap event is required, and the touch time at the same point is very short.

Encapsulated tap and longtap events

Copy XML/HTML Code to clipboard

1. (Function (){
2. Var TOUCHSTART, TOUCHEND;
3. If (typeof (window. ontouchstart )! = 'Undefined '){
4. TOUCHSTART = 'touchstart ';
5. TOUCHEND = 'touchend ';
6. TOUCHMOVE = 'touchmove ';
8. } Else if (typeof (window. onmspointerdown )! = 'Undefined '){
9. TOUCHSTART = 'mspointerlow ';
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 ("You have long-pressed ");
89. }, Box)

The above introduction to the HTML5 touch event evolution tap event is all the content that I have shared with you. I hope you can give us a reference and support me a lot.

Address: http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html