Introduction to touch events in building touch-screen websites with html5_html5 tutorial skills

Foreword
What is the difference between a touch-screen website and a traditional PC website? Changes in interaction methods bear the brunt. For example, our commonly used click event is so powerless on touch screen devices.
Most interactions on mobile phones are achieved through touch, so for touch-screen interactive websites, touch events are very important.
Apple introduced the touch event API in iOS 2.0, and Android is catching up with this de facto standard and narrowing the gap. Recently a W3C working group is working together to develop this touch event specification.

Specification
Here we introduce several popular touch events. You can test this event in most modern browsers (must be a touch screen device Oh):
touchstart: Triggered when the touch starts
touchmove: Triggered when the finger slides on the screen
touchend: Triggered when the touch ends
And each touch event includes three touches List, each list contains a corresponding series of touch points (used to implement multi-touch):
touches: A list of all fingers currently on the screen.
targetTouches: A list of fingers located on the current DOM element.
changedTouches: A list of fingers involved in the current event.
Each touch point contains the following touch information (commonly used):
identifier: a numerical value that uniquely identifies the current finger in the touch session. Generally a serial number starting from 0 (android4.1, uc)
target: DOM element, which is the target of the action.
pageX/pageX/clientX/clientY/screenX/screenY: a value, the position on the screen where the action occurs (page includes the scrolling distance, client does not include the scrolling distance, and screen is based on the screen).
radiusX/radiusY/rotationAngle: Draw an ellipse roughly equivalent to the shape of a finger, with the two radii and rotation angles of the ellipse respectively. The preliminary test browser does not support it. Fortunately, the function is not commonly used. Feedback is welcome.
With this information, we can provide different feedback to users based on these event information.

Below, I will show you a small demo, single-finger dragging using touchmove :

Copy the code

The code is as follows:

/*Drag with one finger*/
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() ;// Prevent browser default events, important
var touch = event.targetTouches[0];
// Place the element where your finger is
obj.style.left = touch.pageX-50 'px';
obj.style.top = touch.pageY-50 'px';
}
}, false);

About a tag four Tips for pseudo-classes in touch-screen devices :
We all know that the four pseudo-classes of the a tag, link, visited, active, and hover, are specially designed for click events, so try to use them in touch-screen websites. Don't use them. After testing, most of them are unavailable. But here is a little trick about hover. After you click a button, the button will always be in the hover state. At this time, the css you set based on this pseudo-class will also work until you click another one with your finger. With one button, the hover state will be transferred to another button. Using this, we can make some small effects. This trick still works in most browsers.

Ideals are full, reality is skinny!
Although w3c is ready for multi-touch, unfortunately few browsers support multi-touch features, especially browsers on the android platform, which makes the finger list introduced 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 full of hope for the future. After all, we have been imprisoned by the single-click operation of the mouse for too long. How exciting it is to operate a website with multiple fingers!