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

Today, Xiaobian will share with you the relevant knowledge points on how to realize the html5 touch event. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you will gain something after reading this article. Let's find out together.

specification

Here are a few popular touch events that you can test in most modern browsers (touch devices only):

touchstart: Triggered at touch start

touchmove: Triggered when your finger slides across the screen

touchend: Triggered when touch ends

Each touch event consists of three touch lists, each containing a corresponding series of touch points (used to implement multi-touch):

touches: List of all fingers currently on the screen.

targetTouches: List of fingers located on the current DOM element.

changedTouches: List of fingers involved in the current event.

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

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

target: DOM element, 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 the screen).

radiusX/radiusY/rotationAngle: Draw an ellipse roughly the shape of a finger, with two radii and rotation angles of the ellipse. Preliminary test browser does not support, fortunately, the function is not commonly used, welcome feedback.

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

Below, I will show you a small demo, using touchmove to implement a single-finger drag:

The copy code is as follows:

/* One-finger drag */

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();//Block browser default event, Important

var touch = event.targetTouches[0];

//place the element where the finger is located

obj.style.left = touch.pageX-50 + 'px';

obj.style.top = touch.pageY-50 + 'px';

}

}, false);

About a tag four pseudo-classes in touch screen devices tips:

We all know that the four pseudo-classes link, visited, active, and hover of the a-tag are designed for click events, so try not to use them on touch-screen websites. Most of the tests are also unusable. But here's a little trick about hover. After you click a button, the button stays in hover, and the CSS you set based on the pseudo-class works until you click another button with your finger, and the hover state transitions to another button. With this, we can make some small effects. This trick is still available in most browsers.

The above is "html5 touch event how to achieve" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.