Shulou(Shulou.com)06/03 Report--

HTML5 touch event evolution tap event introduction, I believe that many inexperienced people do not know what to do about this, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Touch event is a HTML5 event unique to mobile browsers. Although click events are more common in pc and mobile, 300ms delay occurs on the mobile side, which affects the user experience. 300ms delay comes from judging double-click and long press, because click events are triggered only when the default waiting time ends to determine that no subsequent actions occur. So touch events respond faster and experience better.

Type of touch event:

In order to distinguish touch-related state changes, there are many types of touch events. You can determine which type the current event belongs to by checking the TouchEvent.type property of the touch event.

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

Standard touch event

The event name description contains the touches array touchstart that is triggered when the user places a contact on the touch plane. The target element of the event will be the target element at the contact location is touchmove

Triggered when the user moves the contact on the touch plane.

The target element of the event is the same as the target element of the touchstart event corresponding to this touchmove event

Even when the touchmove event is triggered, the contact has been moved out of the element.

It's touchend.

Triggered when a contact is removed from the touch plane by the user (when the user moves a finger away from the touch plane).

It is also triggered when the contact is moved out of the boundary of the touch plane. For example, the user scratches his finger off the edge of the screen.

Contacts that have been removed from the touch plane can be found in the TouchList defined by the changedTouches attribute.

It is triggered by touchenter when a contact enters an element. There is no bubbling process for this event. It is triggered by touchleave when the contact leaves an element. There is no bubbling process for this event. It's touchcancel.

Triggered when the contact is interrupted for some reason. There are several possible reasons (depending on devices and browsers):

The touch is cancelled due to an event: 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 area.

When the number of contacts generated by the user exceeds the number supported by the device, the earliest Touch object in TouchList is cancelled.

Yes

Touch object Properti

Touch.identifier returns a value that uniquely identifies the point in contact with the touch plane. This value is consistent in all events caused by this finger (or stylus, etc.) until it leaves the X coordinate of the .Touch.screenX contact relative to the left edge of the screen. Read-only property the Y coordinate of the Touch.screenY contact relative to the upper edge of the screen. Read-only property. The X coordinate of the Touch.clientX contact relative to the left edge of the visible area. Does not include any roll offset. The Y coordinate of the read-only attribute .Touch.clientY contact relative to the upper edge of the visible area. Does not include any roll offset. Read-only property. Touch.pageX contact X coordinate relative to the left edge of the HTML document. When there is an offset for horizontal scrolling, this value contains the offset for horizontal scrolling. Read-only property the Y coordinate of the touch.pageY contact relative to the upper edge of the HTML document. When there is an offset for horizontal scrolling, this value contains the offset for vertical scrolling. The read-only attribute .Touch.radiusX can surround the minimum elliptical horizontal axis (X axis) radius of the contact surface between the user and the touch plane. This value is in the same unit as screenX. Read-only property .Touch.force finger squeeze touch plane pressure, floating-point number from 0.0 (no pressure) to 1.0 (maximum pressure). The read-only attribute .Touch.radiusY can surround the vertical axis (Y axis) radius of the smallest ellipse of the contact surface between the user and the touch plane. This value is in the same unit as screenY. Read-only property. Touch.target

When the contact is initially tracked (in the touchstart event), the contact is located in the HTML element. Even during the movement of the contact, the position of the contact has left the effective interaction area of the element

Or this element has been removed from the document. It is important to note that if the element is removed during touch, the event will still point to it, but it will no longer bubble to the window or document object.

Therefore, if an element may be removed during touch, it is best practice to bind the listener of the touch event to the element itself to prevent the element from bubbling from being detected from its upper-level element after the element is removed. Read-only attribute.

Touch event of IE10+

IE pointer event name description (on touch device) MSPointerDown touch start MSPointerMove touch point move MSPointerUp touch end MSPointerOver touch point moves into the element, equivalent to mouseoverMSPointerOut touch point away from the element, equivalent to mouseout

MSPointerEvent attribute

Property describes the time the hwTimestamp created the event (ms) isPrimary identifies whether the pointer is the unique ID of the pointerId pointer (similar to the identifier of the touch event) pointerType an integer indicating that the event comes from the mouse, stylus, or finger pressure pen, 0-255. an integer of rotation0-359is available only for stylus input, the rotation of the cursor (if supported) the tilt of the stylus Supported only when typing with a stylus

Equivalent event

Mouse touches keyboard mousedowntouchstartkeydownmousemovetouchmovekeydownmouseuptouchendkeyupmouseoverfocus

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

In other words, click has to go through the touchstart-touchmove-touchend process, 300ms delay, so you need tap events, tap is at the same point of touch time is very short.

Encapsulated tap and longtap events

XML/HTML Code copies content to the clipboard

(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 XLY; 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 ("you have pressed it long") Box) after reading the above, have you mastered the method of HTML5 touch event evolution tap event introduction? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.