码迷,mamicode.com
首页 > 移动开发 > 详细

web移动端touch事件

时间:2019-10-04 09:19:00      阅读:403      评论:0      收藏:0      [点我收藏+]

标签:屏幕   new   理论   结束   page   touch   pagex   targe   不同   

1.移动端与pc端的区别

移动端没有鼠标,自然也没有鼠标事件。所以onmousedown之类的事件监听在移动端时无效的。
移动端为了响应双击事件,onclick事件有300ms的延迟,因为要看看接下来的300ms有没有再次点击,有的话视为双击,没有的话视为单击。
延迟300ms只是理论上,实际上每台手机上这个延迟可能会不同,下面的代码可以测试当前手机上onclick事件的延迟

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

经测试,在chrome模拟器中,onclick延迟基本在88-120之间
在iphone6sp真机上,onclick延时稳定在80左右

2.touch事件

touch事件没有延迟,它是移动端特有的,,pc端不支持
他有以下几个事件:
touchstart:开始触屏事件
touchmove:手指滑动事件(持续触发)
touchstend:触屏结束事件
touchcancal:触屏意外中断事件(手机中途来电?)

基本用法:

<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事件对象

touchEvent事件对象描述了当前事件中的一系列信息

e.touches:当前屏幕上所有触摸点的列表
targetTouches:当前对象上所有触摸点的列表
changeTouches:触发事件时改变的触摸点的集合
每个touch事件包含下面的属性:
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。

4.a链接跳转方案

a链接在移动端的click事件有延迟,可以在touchstart事件中通过阻止默认事件来屏蔽a链接的跳转

web移动端touch事件

标签:屏幕   new   理论   结束   page   touch   pagex   targe   不同   

原文地址:https://www.cnblogs.com/OrochiZ-/p/11621150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!