Touch events in javascript mobile development _ javascript skills

This article mainly introduces touch events in javascript mobile development in detail. If you are interested, you can refer to the event objects as objects used to record relevant information when events occur. Event objects are generated only when an event occurs and can only be accessed within the event processing function. After all event processing functions are completed, the event object is destroyed!

• W3C DOM uses the event object as the first parameter of the event processing function.
• IE uses the event object as an attribute of the window object (equivalent to a global variable)

OriginalEvent object

In an accidental use, I found that when the on () function is used and the second selector parameter is passed in, e. the access to touches [0] is undefined, and EIS printed. Its event object is not a native event object. It was found that it is a jquery event object.

$(window).on("touchstart","body",function(e){  console.log(e)})

In the above example, the event has an originalEvent attribute, and this is the real touch event. JQuery. Event is a constructor that creates a readable and writable jQuery event object, and retains the reference to the native event object event ($ Event. originalEvent) in the event object ). The event objects processed by the event handler we bind are all $ events. This method can also pass the type name of a custom event to generate a Custom Event object.

Touch event

Touchmove: triggered continuously when the finger slides on the screen.
Touchstart: triggered when a finger touches the screen, even if one finger is already on the screen.
Touchend: triggered when your finger leaves the screen.

TouchEvent object

Each touch event triggers a TouchEvent object. The following are three commonly used important attributes of the TouchEvent object.

Touches is a list of all the fingers currently on the screen.
TargetTouches is an array of Touch objects specific to the event target. [Current finger]
ChangeTouches indicates the array of Touch objects that have changed since the last Touch.

Here, I wrote a touch event in js, and clicked on the screen to trigger it. The event object is printed on the console. The result is as follows (the arrow points to the preceding three attributes ):

window.addEventListener("touchstart",function(event){  console.log(event);})

Touch event object attributes

Touches, targetTou, and changeTouches all contain the following attribute values:

ClientX: Touch the x coordinate of the target in the viewport.
ClientY: Touch the y coordinate of the target in the viewport.
Identifier: Unique ID that identifies a touch.
PageX: Touch the x coordinate of the target in the page.
PageY: Touch the y coordinate of the target in the page.
ScreenX: Touch the x coordinate of the target in the screen.
ScreenY: Touch the y coordinate of the target in the screen.
Target: the DOM node target to be touched.
In the above example, the changeTouches object is output in the console as follows:

The above is all the content of this article, hoping to help you learn.