Touch event for html5 touch-screen website construction

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 exampleClick EventIt is so powerless under the touch screen device.

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:List of all fingers currently on the screen.

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

ChangedTouches:List of finger involved in the current event.

Each touch point contains the following Touch Information (commonly used ):

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

Target:A dom element is the target of an action.

pageX/pageX/clientX/clientY/screenX/screenY:A value that specifies the position where an action occurs on the screen (page contains the scroll distance, client does not contain the scroll distance, and screen is based on the screen ).

radiusX/radiusY/RotationAngle:Draw an elliptical shape that is about the same as the shape of the finger, which is the radius and Rotation Angle of the elliptical shape. 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:

 

/* Single-finger drag */var obj = document. getElementById ('id'); obj. addEventListener ('touchmove ', function (event) {// if this element has only one finger, 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.

The ideal is full, and the reality is very skinny!

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!