HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)

Many new events have been added to HTML5, but because their compatibility issues are not ideal and their practical application is not very strong, they are basically omitted here. We only share events that are widely used and compatible. In the future, as the compatibility situation improves More sharing will be added in the future. The events introduced to you today are mainly touch events: touchstart, touchmove and touchend.

The initial touch events touchstart, touchmove and touchend are newly added events in the Safari browser for iOS to convey some information to developers. Because iOS devices have neither a mouse nor a keyboard, PC-side mouse and keyboard events are not sufficient when developing interactive web pages for the mobile Safari browser.

When the iPhone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. Subsequently, browsers on Android also implemented the same event. Touch events (touch) occur when the user places their finger on the screen, slides on the screen, or moves away from the screen. The following details:

Touchstart event: Triggered when a finger touches the screen, even if there is already a finger on the screen.
Touchmove event: Triggered continuously when the finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling.
Touchend event: Triggered when the finger leaves the screen.
Touchcancel event: Triggered when the system stops tracking touches. Regarding the exact departure time of this event, there is no specific explanation in the document, so we can only guess.

The above events will bubble up and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a DOM-compatible manner. Therefore, the event object of each touch event provides common attributes in mouse practice: bubbles (type of bubble event), cancelable (whether the preventDefault() method can be used to cancel the default action associated with the event), clientX (return When the event is triggered, the horizontal coordinate of the mouse pointer), clientY (returns the vertical coordinate of the mouse pointer when the event is triggered), screenX (when an event is triggered, the horizontal coordinate of the mouse pointer) and screenY (returns when an event is triggered) The vertical coordinate of the mouse pointer when an event is triggered). In addition to the common DOM properties, touch events also contain the following three properties for tracking touches.

Touches: An array of touch objects representing the currently tracked touch operations.
TargetTouches: An array of Touch objects specific to the event target.
ChangeTouches: An array of Touch objects that represents what has changed since the last touch.

Each Touch object contains the following properties.

ClientX: The x coordinate of the touch target in the viewport.
ClientY: The y coordinate of the touch target in the viewport.
Identifier: The unique ID that identifies the touch.
pageX: The x coordinate of the touch target on the page.
pageY: The y coordinate of the touch target on the page.
ScreenX: The x coordinate of the touch target on the screen.
ScreenY: The y coordinate of the touch target on the screen.
Target: The striking DOM node target.

Looking at the attributes above, it is indeed very complicated. Each attribute is described in such detail. Only by using some real examples can we better understand the mystery. So a small example is as follows.

JavaScript code

function load (){
 
    document.addEventListener('touchstart',touch,false);
    document.addEventListener('touchmove',touch,false);
    document.addEventListener('touchend',touch,false);
     
    function touch (event){
        var event = event || window.event;
         
        var oInp = document.getElementById("inp");
 
        switch(event.type){
            case "touchstart":
                oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
            case "touchend":
                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
                break;
            case "touchmove":
                event.preventDefault();
                oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
        }
         
    }
}
window.addEventListener(&#39;load&#39;,load,false);

HTML code

<div id="inp"></div>

The above small example. When the touchstart event is triggered, the touch position will be updated to the div tag. When the touchmove event is triggered, the default behavior is scrolling (the default behavior of touch movement is to scroll the page), and then the change information of the touch operation is updated to the div tag. The touchend event outputs the final information about the touch operation. Note that when the touchend event is triggered, there are no Touch objects in the touches collection because there are no active touch operations.

These events will be triggered on all elements of the document, so different parts of the page can be manipulated separately. When touching an element on the screen, these events (including mouse events) occur in the following order:

(1)touchstart
(2)mouseover
(3)mousemove(once)
( 4)mousedown
(5)mouseup
(6)click
(7)touchend

Having introduced so much, how is the compatibility of these touch events? Support touch events (touchstart , touchmove and touchend) browsers include: Safari for iOS, WebKit for Android, Dolfin for bada, BlackBerry WebKit in OS6+, Opera Mobile 10.1+ and Phantom browser in LG's proprietary OS. Currently, only the iOS version of Safari supports multi-touch. Firefox 6+ and Chrome for PC also support touch events.

HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend) are introduced here. Today I mainly introduce to you some touch events that are well compatible with browsers. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend) related articles, please pay attention to the PHP Chinese website!