I. delay of click and other events on mobile terminal

click event can be triggered at both mobile and pc terminals, but there is a delay phenomenon at mobile terminals.

1, background

In order to enhance the user experience, apple specially designed the function of double-click to enlarge the content of the web page for the mobile device, because the content of the early mobile device when browsing the web page is small. However, when the user clicks the button, the mobile device needs to delay execution for about 300ms to judge whether the user wants to double-click.

2, validation

The following uses js code to visually verify the delay of events such as click

< div class = "result" > click on me to try < / div >

var startTime;
        //Print information function
        var log = function(msg) {
            var p = document.createElement('p');
            //Calculate trigger events
            //new Date().getTime(), get the current time
            //new Date().getTime()-startTime get the time difference between event response and touchStart
            p.innerHTML = (new Date().getTime())+" : "+(new Date().getTime()-startTime)+" : "+msg;
            //Add to page
            document.body.appendChild(p);
        }
        //Touch screen
        var touchStart = function(){
            startTime = new Date().getTime();
            log('touchStart');
        }
        //Touch screen end
        var touchEnd = function() {
            log('touchEnd');
        }
        //Mouse down
        var mouseDown = function() {
            log('mouseDown');
        }
        //Mouse click
        var mouseClick = function(){
            log('mouseClick');
        }
        //Mouse bounce
        var mouseUp = function() {
            log('mouseUp');
        }
    var result = document.querySelector('.result');
    //Binding events
    result.addEventListener('mousedown',mouseDown);   //Bind pc click event first
    result.addEventListener('click',mouseClick);
    result.addEventListener('mouseup',mouseUp);
    result.addEventListener('touchstart',touchStart);//Binding mobile events
    result.addEventListener('touchend',touchEnd);   

Time response principle of mobile terminal: response to unique events of mobile terminal first.

II. Solutions

1. Use touch event to simulate click event

The following uses touchstart and touched to encapsulate a mobile tap event

var idcast = {
        //Incoming dom elements
        tap:function(dom,callback) {
            //Determine whether the dom element is passed in or whether the dom element is an object
            if(!dom||typeof dom != "object"){
                return;
            }
            var startX,startY,time,moveX,moveY,distanceX,distanceY;
            dom.addEventListener("touchstart",function(e) {
                if(e.targetTouches.length>1) {
                    return;
                }
                startX = e.targetTouches[0].clientX;
                startY = e.targetTouches[0].clientY;
                time = Date.now();
            });
            dom.addEventListener("touchend",function(e) {
                if(e.changedTouches.length>1) {//More than one finger
                    return;
                }
                //Judge time difference
                if(Date.now()-time>150){//Long press operation
                    return;
                }
                //Get the difference between the coordinates when the finger is released and the coordinates when the touch starts
                moveX = e.changedTouches[0].clientX;
                moveY = e.changedTouches[0].clientY;
                distanceX = moveX - startX;
                distanceY = moveY - startY;
                //Judge coordinate difference
                if(Math.abs(distanceX) < 6 && Math.abs(distanceY) <6) {//Description is click not slide
                    //Perform the processing operation after the corresponding tap event
                    //Call if function is not empty
                    callback&&callback(e);
                    console.log("Mobile click event--tap Event");
                }
            })
        }
    }

You can call the tap method in idcast directly.

2. Use the sealed tap event in zepto to call directly

$(menuBox).on("tap",callback)

zepto download link: https://github.com/madrobby/zepto