Analysis of Tap events and Tap point-through principles

The content of this article is about the analysis of the Tap event and the Tap point-through principle. It has a good reference value and I hope it can help friends in need.

First introduce the tap event:

1. The meaning of the tap event: On the mobile side, the click event will be delayed by 300ms because the browser determines whether the click will continue within 300ms. , to determine whether to zoom the web page. (That is, there is a 300ms time to judge the effect of double-clicking to enlarge the web page. After 300ms has passed, the click event will be triggered)

2. #Implementation of the tap event: Use the touch event supported by the browser by default To simulate, tap events are simulated based on the three events of touchstart, touchmove, and touchend to achieve the effect of encapsulating tap events. The code below is a simple encapsulation I made.

//定义tap函数，传入需要绑定的元素，和一个回调函数
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解构赋值
    el.addEventListener('touchstart',function(e){                            
        console.log('touchstart');
        startTime = Date.now(); //开始触摸的事件  
        startX = e.touches[0].clientX; //手指在浏览器横坐标
        startY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchmove',function(e){
        console.log('touchmove');
        endX = e.touches[0].clientX; //手指在浏览器横坐标
        endY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchend',function(e){
        console.log('touchend');
        if( (Date.now()-startTime) > maxTime){ //如果超过了最大时间，不触发tap
               console.log('超时了');
            return ; 
        }
        //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。
        if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){
             return;
        }
        callBack(e);
     })
}
tap(document.documentElement,function(e){
    console.log(e);
});

To sort it out: the sequence of tap events is touchstart -> touchmove -> touchend -> Execute callback in touchend

The principle of tap penetration:

1. It is common to see this application scenario. Click on the mask layer, and the mask layer disappears, revealing the bottom page. When an element in the bottom page is bound to a click event, and you click on the mask exactly at the position of the element, you will find that the click event of the element is triggered.

2. The click triggering sequence on the PC side is mousedown -> mousemove -> mouseup -> click. The triggering sequence on the mobile side is touchstart -> touchmove - > touchend -> click is executed in this order. Because our mask has disappeared when touchend, it is equivalent to clicking on the element in the bottom page. So the bottom element will trigger the click event.

The solution for tap penetration:

1. Use tap event or click event uniformly.

2. Delay the disappearance of the mask layer to more than 300ms

3. Get a transparent mask to block it (not recommended, too stupid, Still troublesome)

4. Use fastclick library

Related recommendations:

HTML5 new attributes: five global Introduction to attributes

canvas native implementation of front-end web page mobile signature

The above is the detailed content of Analysis of Tap events and Tap point-through principles. For more information, please follow other related articles on the PHP Chinese website!