JavaScript Mobile Development Touches touch event detailed _javascript skills

Event objects are objects that are used to record information about events as they occur. Event objects are only generated when an event occurs, and can only be accessed internally by an event handler, and the event object is destroyed after all event-handler functions have been run!

• The Consortium DOM passes the event object in as the first argument to the event handler function.
• IE takes an event object as an attribute of the Window object (equivalent to a global variable)

Originalevent objects

In an accidental use, I found that when using the on () function and passing in the second selector parameter, E.touches[0] 's access was undefined, and print e found that its event object was not a native event object. It was found to be a jquery event object by reference.

$ (window). On ("Touchstart", "Body", function (e) {
  console.log (e)
})

In the example above, there is an originalevent attribute in the event, and this is the real touch event. Jquery.event is a constructor that creates a read-write jquery event object and retains a reference to this native event object event ($event. originalevent) in the event object. The event handlers that we bind to are $event. The method can also pass the type name of a custom event to generate a user-defined event object.

Touch events

Touchmove: A continuous trigger when the finger slides on the screen.
Touchstart: Triggers when a finger touches the screen, even if a finger is already on the screen
Touchend: Triggers when the finger is left on the screen.

TouchEvent objects

Each touch event triggers a TouchEvent object, and the following are the three most common and important properties of the TouchEvent object

Touches a list of all the fingers currently located on the screen.
Targettouches an array of touch objects that are specific to the event target. [Current Finger]
Changetouches represents an array of touch objects that have changed since the last time it was touched.

Here, I write a touch event with JS, click on the screen can trigger, its event event object in the console print out, the result is as follows (the arrow points to the above three properties):

Window.addeventlistener ("Touchstart", function (event) {
  Console.log (event);
})

Touch Event Object Properties

Touches, Targettou, and changetouches all contain the following property values

ClientX: The x-coordinate of the touch target in the viewport.
ClientY: The y-coordinate of the touch target in the viewport.
Identifier: Identifies the unique ID of the touch.
Pagex: The x-coordinate of the touch target on the page.
Pagey: The y-coordinate of the touch target on the page.
ScreenX: The x-coordinate of the touch target in the screen.
ScreenY: The y-coordinate of the touch target in the screen.
Target: The touch DOM node destination.
Or the example above, the Changetouches object is output from the console as follows:

The above is the entire content of this article, I hope to help you learn.