HTML5 main touch events (touchstart, touchmove and touchend)

　HTML5 Many new events have been added, but because their compatibility issues are not very ideal and the practical application is not very strong, they are basically omitted here. We only share events that are widely compatible with good applications. Sharing will be added in the future as the compatibility improves. 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, the browser 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 to use preventDefault() method) Cancel the default action associated with the event), clientX (returns the horizontal coordinate of the mouse pointer when the event is triggered), 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 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 the touch object representing the currently tracked touch operation.

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-life 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 elements on the screen, the order in which these events (including mouse events) occur is as follows:

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

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.

The above is the detailed content of HTML5 main touch events (touchstart, touchmove and touchend). For more information, please follow other related articles on the PHP Chinese website!