web mobile end touch event

1. The difference between the mobile terminal and the terminal pc

End no mouse movement, naturally, no mouse events. So like onmousedown event listeners invalid when the mobile side.
Mobile terminal in response to double-click events, onclick event there is a delay of 300ms, 300ms because you want to look at the next has to click again, double-click any regarded, if not deemed to click.
300ms delay only in theory, in fact, this delay may be different on each phone, the following code to test the current delay on the phone onclick event

<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>

After testing, the chrome simulator, the onclick delay between 88-120 substantially
on a real machine iphone6sp, the onclick delay stabilized at about 80

2.touch event

touch event is not delayed, it is unique to the mobile terminal does not support ,, pc end
he has the following events:
touchstart: start touch event
touchmove: finger slip events (continuous trigger)
touchstend: touch the end of the event
touchcancal: unexpected touch interrupt event (half-way phone call?)

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>

3.touchEvent event object

touchEvent event object describes a range of information about the current events

e.touches: The current list of all the touch points on the screen
targetTouches: the current list of all the touch points on the object
collection to change the trigger event touch point: changeTouches
Each touch event contains the following properties:
clientX: Touch the target in the viewport x-coordinate.
clientY: Touch the target in the mouth, as the y-coordinate.
identifier: unique ID identifies the touch.
pageX: x coordinate of the touch target on the page.
pageY: Touch the target in the y coordinate of the page.
screenX: Touch the target in the x coordinate of the screen.
screenY: Touch the target in the y-coordinate screen.
target: Touch DOM node target.

4.a links jump program

a moving click event link end delay, may touchstart jump event to mask a default event linked by preventing

Guess you like

Origin www.cnblogs.com/OrochiZ-/p/11621150.html