The actual reference of the touch event of js

Researching the touch screen sliding event of the mobile page. Searching for the corresponding technical support of jquery is really tedious, while js only needs a few simple steps to define it. Let me share with you the actual reference of the touch event of js.

When I first started working on front-end pages, I came into contact with js, but then I was attracted by the simple and efficient jquery and have been using it ever since.

As for js, I subjectively abandoned it as the underlying technology.

Until the past few days of work, I have been studying touch screen sliding events on mobile pages. Searching for the corresponding technical support of jquery is really tedious (of course, it may be that I don’t understand jquery enough), while js only requires a few steps. Simply define it.

Since I don’t know much about js, I have tried the simplest applications for a long time... Let me share the actual reference of the js touch event:

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

The above code inevitably uses something from jquery, and those who don’t use jquery can ignore it.

The corresponding events are:

touchstart: triggered when a finger touches the screen; it will be triggered even if there is already a finger on the screen.
touchmove: Continuously triggered when the finger slides on the screen. During this event, calling preventDefault() prevents scrolling.
touchend: triggered when the finger is removed from the screen.
touchcancel: Fired when the system stops tracking touches. The exact triggering event for this event is not clear in the documentation.

The following attributes exist on the event objects of the above events:

touches: An array of Touch objects representing the currently tracked touch operations.
targetTouches: Array of Touch objects specific to event targets.
changeTouches: An array of Touch objects indicating what has changed since the last touch.

Each Touch object contains the following properties:

clientX: The X coordinate of the touch target in the viewport.
clientY: The Y coordinate of the touch target in the viewport.
identifier: represents the unique ID of the touch.
pageX: The x-coordinate of the touch target in the page.
pageY: The y coordinate of the touch target in the page.
screenX: The x-coordinate of the touch target on the screen.
screenY: The y coordinate of the touch target on the screen.
target: Touched DOM node coordinates

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript video tutorial!