Web mobile touch screen events

1. The difference between mobile and pc

There is no mouse on the mobile terminal, and naturally there are no mouse events. Therefore, event monitoring such as onmousedown is invalid on the mobile terminal.
In order to respond to the double-click event on the mobile terminal, the onclick event has a delay of 300ms, because it is necessary to see if the next 300ms is clicked again.
The following code can verify the delay of the onclick event on the current phone (run when no viewport is set)

<script>
    var now
    document.ontouchstart = function(){
        // 返回 1970 年 1 月 1 日至今的毫秒数
        now = new Date().getTime()
        console.log("touchstrat")
    }
    document.onclick=function(){
        // 计算延时
        var delay = new Date().getTime() - now
        console.log("onclick")
        console.log(delay+"ms")
        // 真机测试使用alert()
    }
</script>

2.touch event

The touch event is not delayed, it is unique to the mobile terminal, and it is not supported on the pc side.
He has the following events:
touchstart: start touch screen event
touchmove: finger sliding event (continuously triggered)
touchstend: touch screen end event
touchcancal: touch screen accident Interruption event (phone call halfway?)

Basic usage:

<script>
    document.addEventListener("touchstart",function(){
        console.log("touchstart")
    })
    document.addEventListener("touchmove",function(){
        console.log("touchmove")
    })
    document.addEventListener("touchend",function(){
        console.log("touchend")
    })
</script>

If the default event is blocked in touchstart, the onlcik event will not be triggered (do not mount the default event on the document, the browser may not support it)

<script>
    var wrap = document.getElementById("wrap")
    wrap.addEventListener("touchstart",function(e){
        console.log("touchstart")
        e.preventDefault()
    })
    wrap.addEventListener("touchmove",function(e){
        console.log("touchmove")
    })
    wrap.addEventListener("touchend",function(e){
        console.log("touchend")
    })
    wrap.addEventListener("click",function(e){
        console.log("click")
    })
</script>

3. touchEvent event object

touchEvent event object describes a series of information in the current event

e.touches: list of all touch points on the current screen
targetTouches: list of all touch points on the current object
changeTouches: collection of touch points changed when the event is triggered.
Each touch event contains the following attributes:
clientX: touch target in the viewport x coordinate.
clientY: the y coordinate of the touch target in the viewport.
identifier: A 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 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 target of the touched DOM node.

4. Onclick event delay processing

The delay of 300ms in actual development makes the user's experience very bad, we naturally need to remove the delay

Method 1: Change the default viewport width

<meta name="viewport" content="width=device-width">

Method 2: Disable zoom (double-click event on the mobile terminal is to zoom the screen. If the screen zoom is disabled through the meta tag, the double-click event will be invalid, and the onclick delay will naturally disappear)

<meta name="viewport" content="user-scalable=no">

PS: These two properties generally exist at the same time when setting the viewport. The list here is only to prove that they can cancel the click delay when they exist alone.

Method 3: fastclick
principle: when touchend event is detected, a click event will be emulated immediately through the DOM custom event, and the real click event of the browser after 300ms will be blocked.
Step: Introduce the fastclick file and load it successfully on the page After that, execute the FastClick.attach () function and pass in the corresponding dom element.
Disadvantages: The script is relatively large

<!-- 引入fastclick -->
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>

<!-- 初始化 -->
<script>
    window.onload = function(){
        // 初始化，传入的参数表明整个页面中FastClick都生效
        FastClick.attach(document.body)
        var now
        var wrap = document.getElementById("wrap")
        wrap.addEventListener("touchstart",function(e){
            console.log("touchstart")
            now = new Date().getTime()
            //e.preventDefault()
        })
        wrap.addEventListener("touchmove",function(e){
            console.log("touchmove")
        })
        wrap.addEventListener("touchend",function(e){
            console.log("touchend")
        })
        wrap.addEventListener("click",function(e){
            console.log("click")
            var delay = new Date().getTime() - now
            console.log(delay)
        })
    }
</script>