Most interactions on mobile phones are implemented through touch. Therefore, for interactive websites with touch screens, touch events are very important. Here we will introduce several popular touch events, you can test this event in most modern browsers. It must be a touch screen device. If you are interested, you can understand it.
Preface
What is the difference between a touch-screen website and a traditional pc-side website? The change in interaction methods is the first. For example, we often use click events, which are so powerless on touch screen devices.
Most interactions on mobile phones are implemented through touch. Therefore, for interactive websites with touch screens, touch events are very important.
Apple introduced the touch event API in iOS 2.0. Android is catching up with this fact standard and narrowing the gap. A recent W3C Working Group is working together to develop this touch event specification.
Specifications
Here we will introduce several popular touch events, which you can test 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 contains three touch lists, each containing a series of corresponding touch points (used for multi-touch ):
Touches: the list of all fingers currently on the screen.
TargetTouches: the list of fingers on the current DOM element.
ChangedTouches: A list of finger related to 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, it is the serial number starting from 0 (android4.1, uc)
Target: DOM element, which is the target of an action.
PageX/clientX/clientY/screenX/screenY: the position where the action occurs on the screen. The page contains the scroll distance, and the client does not contain the scroll distance, screen is based on the screen ).
RadiusX/radiusY/rotationAngle: draws an elliptical shape, which is equivalent to the shape of the finger. The radius and Rotation Angle of the elliptical shape are respectively drawn. The preliminary test is not supported by the browser. Fortunately, the function is not commonly used. You are welcome to give your feedback.
With this information, we can provide different feedback to users based on the event information.
Next, I will show you a small demo, using the single-finger drag implemented by touchmove:
The Code is as follows:
/* Single-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.tar getTouches. length = 1 ){
Event. preventDefault (); // block the default events of the browser. Important
Var touch = event.tar getTouches [0];
// Place 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 four pseudo categories of tag a in touch screen devices:
We all know that tag a's four pseudo-class links, visited, active, and hover are designed for click events, so do not use them in touch-screen websites. Most of the tests are also unavailable. But here is a tip about hover. After you click a button, it will remain in the hover state, the css you set based on this pseudo class also works, until you click another button with your fingers, the hover status will be transferred to another button. With this, we can make some small results. This technique is still available in most browsers.
Ideal is full and realistic!
Although w3c is ready for multi-touch, it is a pity that few browsers support the multi-touch feature, especially the browsers on the android platform, which makes the finger list described above empty talk, capturing two touch points will cause the touch to become invalid! Fortunately, the safari browser that comes with ios devices can support this feature, making us hopeful for the future. After all, we have been banned for too long by the single-point operation of the mouse. It is so exciting to operate a website!
