Detailed explanation of touch events in mobile terminals

This article brings you a detailed explanation of touch events in mobile terminals. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1.touchstart

Triggered when a finger touches the screen

dom.addEventListener('touchstart',function(e){});
startX=e.touches[0].clientX;

The e object returned by the event contains mobile-specific attributes:
tarchTouches: All current touches on the target element
changedTouches: All touches on the latest changes on the page
touches: All touches on the page

2.touchmove

Finger slides on the screen When the

dom.addEventListener('touchmove',function(e){});

event is triggered continuously, the e object returned contains mobile-specific attributes:
tarchTouches: all current touches of the target element
changedTouches: all the latest changes on the page Touch
touches: All touches on the page

3.touchend

The

e

object returned by the

dom.addEventListener('touchend',funciton(e){});
//在touchend中，touches拿不到touch对象，
//因为触摸已经结束，changedTouches中拿到触摸对象
//console.log(e);
//endX=e.touches[0];  undefined 
endX=e.changedTouches[0].clientX;

event triggered when the finger leaves the screen contains Mobile-specific properties:
changedTouches: All the most recently changed touches on the page
touchcancel: Fired when the system stops tracking touches. (Not often used)
In the touchend event, the event will notify the record changeTouches

4. e.touches[0]

clientX: The touch target is The X coordinate in the viewport.
clientY: The Y coordinate of the touch target in the viewport.
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.

Related recommendations:

detailed explanation of touch touch events in javascript mobile development_javascript skills

javascript mobile device web development Encapsulation example of touch event_javascript skills

The above is the detailed content of Detailed explanation of touch events in mobile terminals. For more information, please follow other related articles on the PHP Chinese website!