jquery-Touchscreen Device Touch Event

Some of the more popular touch events, you can test this event in most modern browsers (must be a touchscreen device OH):

touchstart: trigger when Touch is started

touchmove: triggers when the finger slides on the screen

touchend: trigger at end of touch

Each touch event includes three touch lists, each containing a series of touch points (for multi-Touch):

touches: A list of all the fingers that are currently on the screen.

targettouches: The list of fingers that are located on the current DOM element.

changedtouches: A list that involves the finger of the current event.

Each touch point consists of the following touch information (commonly used):

identifier: A numeric value that uniquely identifies the current finger in a touch session. Usually starting from 0 serial number (ANDROID4.1,UC)

Target: The DOM element, which is the target of the action.

/// pageX pageX clientX clientY/screenX/screenY : A numeric value where the action takes place on the screen (page contains scrolling distance, client does not contain scrolling distance, screen is based on screens).

radiusX / radiusY/ RotationAngle: draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.

With this information, we can provide users with different feedback based on these event messages.

Below, show a small demo, with Touchmove implementation of single-finger drag:

/*single Finger Drag*/varobj = document.getElementById (' id '); Obj.addeventlistener (' Touchmove ',function(event) {//If there's only one finger in the position of this element ,    if(Event.targetTouches.length = = 1) {event.preventdefault ();//Block Browser default events, important        varTouch = Event.targettouches[0]; //Place the element where the finger is locatedObj.style.left = touch.pagex-50 + ' px '; Obj.style.top= touch.pagey-50 + ' px '; }}, false);

Tips on a label four pseudo-class in a touchscreen device:

We all know that the four pseudo-class link,visited,active,hover for the A tag is designed for the Click event, so try not to use them in the touchscreen website. Most of the tests are also not available. But here's a tip about hover, when you click on a button, the button will always be in the hover state, and the CSS you set based on this pseudo-class is working, until you click another button with your finger, and the hover state moves to the other button. With this, we can make some small effects. This technique is still available in most browsers.

jquery-Touchscreen Device Touch Event