html5移动端触摸事件touch

html5移动端触摸事件touch
0

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

  • touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
  • touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。

还有一个有待验证的:

  • 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);

我刚学了 HTML 基础知识,以为自己入门了,没想到还有这么复杂的 :joy:

大佬可以多分享一些适合入门学习的知识吗?谢谢!

刚刚开始学习的话,建议看一些系统性强的教程。推荐看w3c官方的文档。