Shulou(Shulou.com)06/03 Report--

This article is to share with you about the usefulness of touch events in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Standard

Here we introduce several popular touch events that you can test in most modern browsers (must be touch-screen devices):

Touchstart: triggered when the touch starts

Touchmove: triggered when the finger is sliding on the screen

Touchend: triggered when the touch ends

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

Touches: a list of all fingers currently on the screen.

TargetTouches: a list of fingers on the current DOM element.

ChangedTouches: a list of fingers involving the current event.

Each touch point contains the following touch information (commonly used):

Identifier: a number that uniquely identifies the current finger in a touch session (touch session). Generally speaking, it is a serial number starting from 0 (android4.1,uc)

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

PageX/pageX/clientX/clientY/screenX/screenY: a numeric value where the action occurs on the screen (page contains scrolling distance, client does not include scrolling distance, and screen is based on the screen).

RadiusX/radiusY/rotationAngle: draw an ellipse about the shape of a finger, the two radii of the ellipse and the rotation angle. The preliminary test browser does not support it, but the functions are not commonly used. Feedback is welcome.

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

Next, I'm going to show you a small demo, a single-finger drag implemented with touchmove:

The code is as follows:

/ * drag only * /

Var obj = document.getElementById ('id')

Obj.addEventListener ('touchmove', function (event) {

/ / if there is only one finger in the position of this element

If (event.targetTouches.length = = 1) {

Event.preventDefault (); / / blocks browser default events, which is important

Var touch = event.targetTouches [0]

/ / put the element in the position of the finger

Obj.style.left = touch.pageX-50 + 'px'

Obj.style.top = touch.pageY-50 + 'px'

}

}, false)

Tips on the four pseudo-classes of a tag in touch screen devices:

We all know that the four pseudo-classes of the a tag link,visited,active,hover are designed for click events, so try not to use them on touch-screen sites. Most of them are not available after testing. But here is a little trick about hover. When you click a button, the button will always be in the hover state, and the css you set based on this pseudo class will also work until you click another button with your finger, and the hover state will be transferred to another button. Taking advantage of this, we can make some small effects. This technique is available in most browsers.

The ideal is very plump, the reality is very bony!

Although the W3C is ready for multi-touch, it is a pity that few browsers support multi-touch, especially the browsers on the android platform, which makes the finger list described above become empty talk, capturing two touch points will directly lead to touch failure! Fortunately, the safari browser that comes with ios devices can support this feature, which makes us hopeful about the future. After all, we have been imprisoned by the single-point operation of the mouse for too long, how exciting it is to operate a website!

Thank you for reading! This is the end of this article on "what is the use of touch events in html5?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.