Mobile Phone Touch Screen JS events, Mobile Phone Touch Screen JS events

Mobile Phone Touch Screen JS events, Mobile Phone Touch Screen JS events

Processing Touch events allows you to track the position of each finger of a user. You can bind the following four Touch events:

Touchstart: // triggered when the finger is placed on the screen
Touchmove: // triggered when the finger moves on the screen
Touchend: // triggered when the finger is picked up from the screen
Touchcancel: // triggered when the system cancels the touch event. When will the system be canceled? Unknown

Client/clientY: // The Position of the touch point relative to the browser window viewport
PageX/pageY: // The Position of the touch point relative to the page
ScreenX/screenY: // position of the touch point relative to the screen
Identifier: // unique ID of the touch object

 

Each Touch object contains the following attributes.

ClientX: Touch the X coordinate of the target in the viewport.
ClientY: Touch the Y coordinate of the target in the viewport.
Identifier: the unique ID of the 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 coordinate of the DOM node to be touched.

// Touchstart event function touchSatrtFunc (e) {// evt. preventDefault (); // var touch = e. touches [0]; // obtain the first contact var x = Number (touch. pageX); // page contact X coordinate var y = Number (touch. pageY); // page contact Y coordinate // record contact initial position startX = x; startY = y;} // touchmove event function touchMoveFunc (e) {// evt. preventDefault (); // var touch = evt, such as browser scaling and scroll bar scrolling, when the touch is blocked. touches [0]; // obtain the first contact var x = Number (touch. pageX); // page contact X Coordinate var y = Number (touch. pageY); // page contact Y coordinate var text = 'touchmove event triggering :( '+ x +', '+ y + ')'; // determine the moving direction if (x-startX! = 0) {// sliding left and right} if (y-startY! = 0) {// slide up and down }}
How to use javascript to determine whether the touch screen or mouse is used

The mouse event is supported by all browsers. A common touch-screen mobile phone can also use a usb otg External mouse.

So you can only determine whether the browser supports touch screen. The key here is
[Ontouchstart, ontouchmove, ontouchend, ontouchcancel]
Browsers that support touch screens all have these four touch events.

Window. onload = function () {if (document. hasOwnProperty ("ontouchstart") {alert ("");} else {alert (" ");}};

Css or js touch screen events

Ontouchstart and ontouchend