Touch Event "HTML5 Build touch Screen website"

Touch Event "HTML5 Build touch Screen website"

Objective

What is the difference between a touch screen website and a traditional PC-side website, and the change in interaction is the first. For example, the click event that we use is so powerless under a touchscreen device.

Most of the interactions on the phone are done through touch, so touching events is important for touch-screen interactive sites.

Apple introduced touch event api,android in iOS 2.0 and is catching up to this fact standard to narrow the gap. A recent work group is working together to develop this touch event specification.

Specification

Here we introduce some of the more popular touch events, you can test this event in most modern browsers (must be a touchscreen device OH):

Touchstart: trigger when Touch is started

touchmove: triggers when the finger slides on the screen

touchend: trigger at end of touch

Each touch event includes three touch lists, each containing a series of touch points (for multi-Touch):

touches: A list of all the fingers that are currently on the screen.

targettouches: The list of fingers that are located on the current DOM element.

changedtouches: A list that involves the finger of the current event.

Each touch point consists of the following touch information (commonly used):

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

Target: The DOM element, which is 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 screens).

radiusX / radiusY/ RotationAngle: draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.

With this information, we can provide users with different feedback based on these event messages.

Below, I will show you a small demo, with Touchmove implementation of single-finger drag:

/* 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.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);    

Tips on a label four pseudo-class in a touchscreen device:

We all know that the four pseudo-class link,visited,active,hover for the A tag is designed for the Click event, so try not to use them in the touchscreen website. Most of the tests are also not available. But here's a tip about hover, when you click on a button, the button will always be in the hover state, and the CSS you set based on this pseudo-class is working, until you click another button with your finger, and the hover state moves to the other button. With this, we can make some small effects. This technique is still available in most browsers.

The ideal is very plump, the reality is very bone feeling!

Although the web is ready for multi-touch, unfortunately few browsers support multi-touch features, especially the browser on the Android platform, and let the finger list described above become empty talk, capturing two touch points will directly cause the touch to fail! Fortunately, the iOS device comes with a Safari browser that supports this feature, giving us a lot of hope for the future. After all, we have been imprisoned for too long by the mouse's single-point operation, how exciting it is to operate a website!

Touch Event "HTML5 Build touch Screen website"