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

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 an touches array

Touchstart

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

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. Yes

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. Yes

Touchenter

Triggered when the contact enters an element. There is no bubbling process for this event. Yes

Touchleave

Triggered when the contact leaves an element. There is no bubbling process for this event. Yes

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 touch pen, etc.) until it leaves the touch plane.

The X coordinate of the Touch.screenX contact relative to the left edge of the screen. Read-only attribute.

The Y coordinate of the Touch.screenY contact relative to the upper edge of the screen. Read-only attribute.

The X coordinate of the Touch.clientX contact relative to the left edge of the visible area. Does not include any roll offset. Read-only attribute.

The Y coordinate of the Touch.clientY contact relative to the upper edge of the visible area. Does not include any roll offset. Read-only attribute.

The X coordinate of the Touch.pageX contact 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 attribute.

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. 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 attribute.

Touch.force fingers squeeze the pressure of the touch plane, floating point from 0.0 (no pressure) to 1.0 (maximum pressure). Read-only attribute.

Touch.radiusY can surround the minimum elliptical vertical axis (Y axis) radius of the contact surface between the user and the touch plane. This value is in the same unit as screenY. Read-only attribute.

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

Event name description (on touch device)

MSPointerDown touch start

MSPointerMove contact point movement

MSPointerUp Touch end

The MSPointerOver touch point moves into the element, which is equivalent to mouseover

The MSPointerOut touch point leaves the element, which is equivalent to mouseout

MSPointerEvent attribute

Attribute description

The time hwTimestamp created the event (ms)

IsPrimary identifies whether the pointer is the primary pointer

The unique ID of the pointerId pointer (similar to the identifier of the touch event)

PointerType an integer that identifies whether the event came from a mouse, stylus, or finger

Pressure of pressure pen, 0-255. available only for stylus input

Integer rotation 0-359, rotation of the cursor (if supported)

The inclination of the tiltX/tiltY stylus is supported only when entered with a stylus.

Equivalent event

Mouse touch keyboard

Mousedown touchstart keydown

Mousemove touchmove keydown

Mouseup touchend keyup

Mouseover focus

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 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 ("you have pressed for a long time")

}, box)

Read here, this "HTML5 touch event evolution tap event" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.