Implementation of HTML5 touch events (touchstart, touchmove and touchend)

Time:2020-8-14

Many new events have been added to HTML5, but their compatibility is not very ideal and their application is not very practical. Therefore, we will basically omit them here. We will only share events with good compatibility, and we will continue to add them with the improvement of compatibility in the future. The events introduced today are mainly touch events: touchstart, touchmove and touchend.

Touch events at the beginning touch start, touchmove and touchend are new events added by Safari browser for IOS to convey some information to developers. Because IOS devices have neither a mouse nor a keyboard, mouse and keyboard events on the PC side are not enough when developing interactive web pages for mobile Safari browsers.

When the iPhone 3GS was released, its own mobile Safari browser provided some new events related to touch operation. Subsequently, browsers on Android implemented the same event. Touch events start when the user’s finger is on the screen, when they slide across the screen, or when they move away from the screen. The details are as follows:

  • Touch start event: triggered when a finger touches the screen, even if one finger is already on the screen.
  • Touchmove event: triggered continuously when the finger is sliding on the screen. During this event, calling the preventdefault() event prevents scrolling.
  • Touchend event: triggered when the finger leaves the screen.
  • Touchcancel event: triggered when the system stops tracking touch. As for the exact departure time of this event, there is no specific description in the document, so we can only guess.

All of the above events will bubble and can be cancelled. 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 the common properties in mouse practice: bubbles (bubble event type), cancelable (whether to use preventdefault () Method can cancel the default action associated with an 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 (the horizontal coordinate of the mouse pointer when an event is triggered), and screeny (returns the vertical coordinate of the mouse pointer when an event is triggered). In addition to the common DOM properties, touch events contain the following three properties for tracking touch.

  • Touches: an array of touch objects representing the currently tracked touch operation.
  • Targettouches: an array of touch objects specific to the event target.
  • Changetouches: an array of touch objects that represent what has changed since the last touch.

Each touch object contains the following properties.

  • Clientx: touch the X coordinate of the target in the viewport.
  • Clienty: touch the Y coordinate of the target in the viewport.
  • Identifier: a unique ID that identifies the touch.
  • Pagex: touch the X coordinate of the target in the page.
  • Pagey: touch the Y coordinate of the target in the page.
  • Screenx: touch the X coordinate of the target in the screen.
  • Screen Y: touch the Y coordinate of the target in the screen.
  • Target: the DOM node target to the eye.

The attribute light above is really tedious. Each attribute is so detailed. Only a few small examples of real Dao and real gun can understand the mystery. So here’s a small example.


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('load',load, false);

Make a little change to the above code, you can judge the horizontal sliding direction, and then the corresponding action on the left is as follows:

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");
        var distance,clientX_start,clientX_end,
            minRange=10;
            this.clientX_start;
            this.direction;
 
            this.callbackFun=function(){
            if(this.direction=='ltr') {
                console.log ('from left to right ');
            }
            else {
                console.log ('from right to left ');
            }
            }
        switch(event.type){
            case "touchstart":
                clientX_start=event.touches[0].clientX;
                this.clientX_start=clientX_start;
                break;
            case "touchend":
                this.callbackFun();
                break;
            case "touchmove":
                event.preventDefault();
               
                clientX_end = event.changedTouches[0].clientX;
                //Determine the direction of movement
                distance=clientX_end-this.clientX_start;
                if(this.clientX_start+minRange<clientX_end) {
                    this.direction='ltr';
                }
                else if(this.clientX_start-minRange>clientX_end){
                    this.direction='rtl';
                }
                break;
        }  
    }
}
window.addEventListener('load',load, false);

This article introduces the implementation of HTML5 touch events (touchstart, touchmove and touchend). For more information about HTML5 touch events, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!