Comment: Most of the interactions on mobile phones are achieved through touch, so for touch screen interactive websites, touch events are very important. Here we introduce several touch events that are more popular. You can test this event in most modern browsers. Friends who are interested can learn about it.
PrefaceWhat is the difference between a touch screen website and a traditional PC website? The changes in interaction methods are the first to be affected. For example, the click event we often use is so powerless under touch screen devices.
Most of the interactions on the mobile phone are achieved through touch, so touch events are very important for interactive websites with touch screens.
Apple introduced the touch event API in iOS 2.0, and Android is catching up with this fact standard to narrow the gap. Recently, a W3C working group is working together to formulate this touch event norm.
specification
Here we introduce several touch events that are more popular. You can test this event in most modern browsers (must be a touch screen device):
touchstart: Triggered when the touch starts
touchmove: Triggered when the finger slides on the screen
touchend: Triggered when the touch ends
Each touch event includes three touch lists, each list contains a corresponding series of touch points (used to implement multi-touch):
touches: A list of all fingers currently located on the screen.
targetTouches: List of fingers located on the current DOM element.
changedTouches: List of fingers involving the current event.
Each touch point contains the following touch information (commonly used):
identifier: A value that uniquely identifies the current finger in the touch session. Generally, the flow number starting from 0 (android4.1, uc)
target: DOM element, is the target targeted by the action.
pageX/pageX/clientX/clientY/screenX/screenY: A value, where the action occurs on the screen (page contains the scroll distance, client does not contain the scroll distance, screen is based on the screen).
radiusX/radiusY/rotationAngle: Draw an ellipse approximately equivalent to the shape of a finger, two radii and rotation angle of the ellipse respectively. The preliminary test browser does not support it, but fortunately the functions are not commonly used, so everyone is welcome to feedback.
With this information, we can provide users with different feedback based on these event information.
Below, I will show you a small demo, single-finger drag using touchmove:
/*Drag with single 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();// Block the browser default event, important
var touch = event.targetTouches[0];
// Put the element where your finger is
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, and hover are designed for click events, so try not to use them in touch screen websites. Most of the tests are also unavailable. But here is a little trick about hover. When you click a button, the button will remain in the hover state. At this time, the css you set based on this pseudo-class also works until you click another button with your finger, the hover state will be transferred to another button. Using this we can make some small effects. This trick is still available 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 Android platforms, 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-point operation of the mouse for too long. How exciting it is to use a website more!