HTML5 touch events

This article mainly introduces the actual combat and analysis of touch events in HTML5. The introduction is more detailed. Friends in need can refer to it.

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 Sharing will be added gradually after the compatibility is improved. 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. Specific instructions below:

　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 properties 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 common DOM attributes, touch events also include the following three attributes 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 indicating what has changed since the last touch.

　The properties of each Touch object are as follows.

　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 in the page.
　pageY：The y coordinate of the touch target in 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

<p id="inp"></p>

The above small example. When the touchstart event is triggered, the touch position will be updated to the p 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 p 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? Browsers that support touch events (touchstart, touchmove and touchend) are: Safari for iOS, WebKit for Android, Dolfin for bada, BlackBerry WebKit in OS6, Opera Mobile 10.1 and the 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 entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website

##

The above is the detailed content of HTML5 touch events. For more information, please follow other related articles on the PHP Chinese website!