Home > Web Front-end > H5 Tutorial > body text

Detailed explanation of touch events in mobile terminals

不言
Release: 2018-09-04 10:46:39
Original
3643 people have browsed it

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;
Copy after login

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){});
Copy after login

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;
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!