html5移动端触摸事件touch
专注前端30年 发布于 2018-10-22

移动端主要的触摸事件有三个:

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。

touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

touchend事件:当手指从屏幕上离开的时候触发。

还有一个有待验证的:

touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切触发时间,文档中并没有具体说明,咱们只能去猜测了。


由于手机端的手指触发不是单个的,所以在event里面生成的与触摸有关的数据都是以数组的形式列出来的,有以下三个:

touches:表示当前跟踪的触摸操作的touch对象的数组。当前屏幕上所有触摸点的集合列表

targetTouches:特定于事件目标的Touch对象的数组。绑定事件的那个结点上的触摸点的集合列表

changedTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。触发事件时改变的触摸点的集合

举例来说,比如div1, div2只有div2绑定了touchstart事件,第一次放下一个手指在div2上,触发了touchstart事件,这个时候,三个集合的内容是一样的,都包含这个手指的touch,然后,再放下两个手指一个在div1上,一个在div2上,这个时候又会触发事件,但changedTouches里面只包含第二个第三个手指的信息,因为第一个没有发生变化,而targetTouches包含的是在第一个手指和第三个在div2上的手指集合,touches包含屏幕上所有手指的信息,也就是三个手指。

每个数组Touch对象包含的属性如下。
  clientX:触摸目标在视口中的x坐标。
  clientY:触摸目标在视口中的y坐标。
  identifier:标识触摸的唯一ID。
  pageX:触摸目标在页面中的x坐标。
  pageY:触摸目标在页面中的y坐标。
  screenX:触摸目标在屏幕中的x坐标。
  screenY:触摸目标在屏幕中的y坐标。
  target:触目的DOM节点目标。

每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。兼容性:所有浏览器均支持
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 不随页面滚动而改变 兼容性:所有浏览器均支持。
pageX:参照点也是浏览器内容区域的左上角 会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持


radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。

下面是一个非常简单的案例

var obj = document.getElementById('id');   
obj.addEventListener('touchstart', function(event) {   
     // 如果这个元素的位置内只有一个手指的话   
    if (event.targetTouches.length == 1) {   
     event.preventDefault();// 阻止浏览器默认事件,重要    
        var touch = event.targetTouches[0];   
        // 把元素放在手指所在的位置   
        alert('触发点击事件')   
        }   
}, false);


推荐阅读