移动端touch事件和事件参数详解

什么是touch事件

  touch事件是移动端触屏设备上的事件,当用户触摸屏幕及进行一系列操作时发生的事件。 包含touchstart, touchmove, touchend事件。

 

touch事件模式

  touch事件同其他dom事件一样(因为本身就属于dom事件,只不过用在触屏设备的新增html5事件),用 addEventListener绑定,在事件处理时使用e.prevantDefault()来阻止默认事件执行(例如你在滚动div时,使用它来阻止 页面滚动),使用e.stopPropagation()来阻止事件向上冒泡,等等。

触发事件时参数对象event属性

  touchList:touch类对象组成的数组 touch对象:touch对象表示一个触点,触点属性包含identifier, target, clientX/clientY, pageX/pageY, screenX/screenY, force(接触面最小椭圆角度)/radiusX(接触面最小椭圆X轴)/radiusY(接触面最小椭圆Y轴) /rotationAngle(chrome上目前还是带有webkit前缀的webkitForce(压力)/webkitRadiusX /webkitRadiusY/webkitRotationAngle), 其中identifier用来标识该触点,因为屏幕上可能同时存在多个触点。

changedTouches/touches/targetTouches

touches:为屏幕上所有手指的信息

PS:因为手机屏幕支持多点触屏,所以这里的参数就与手机有所不同

targetTouches:手指在目标区域的手指信息

changedTouches:最近一次触发该事件的手指信息

比如两个手指同时触发事件,2个手指都在区域内,则容量为2,如果是先后离开的的话,就会先触发一次再触发一次,这里的length就是1,只统计最新的

PS:一般changedTouches的length都是1

touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息

这里要使用哪个数据各位自己看着办吧,我也不是十分清晰(我这里还是使用changedTouches吧)

以上就是mouse与touch主要不同点,但这些并不是太影响我们的操作,因为到现在为止,我们一般还是使用的是单击

事件解析

touchstart事件

1、发生条件:当用户触摸到屏幕时,发生touchstart事件。

实验:

  • 一根手指触摸屏幕: 此时触发一个touchstart事件
  • 两根手指触摸屏幕: 先后发生两个touchstart事件 summary:touchstart是按触摸点(严格说应该是分离的两个触摸点)来定义的。(关于触发原理,这里是臆想而已,这个问题已在知乎上提问,届时更新)

2、属性解析

  • changedTouches属性: 一个touchList数组,表示该事件发生时发生改变的触点,一般都是该触点本身。
    此时来说说indetifier这个属性吧:
    实验:
    1、一根手指Fa触发touchstart,该对象的identifier为0;
    2、放上手指Fb, 此时触发第二个touchstart事件,identifier为1;
    3、再放上Fc,此时触发第三个touchstart事件,identifier为2;
    4、再放上Fd,此时触发第四个touchstart事件,identifier为3;
    5、此时把Fa抬起,放上Fe, 此时触发第五的touchstart事件,identifier为0;
    6、此时把Fd抬起,放上Ff,此时触发第六个tounchstart事件,identifier为3;
    summary:标识会自动填上从0开始且不存在的identifier,所以以indentifier来标识触摸点时要注意这一点。

  • touches属性:
    一 个 TouchList 对象,包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个element 上,也无论它们状态是否发生了变化。【摘自https://developer.mozilla.org】

  • targetTouches属性:
    一个 TouchList 对象,是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element 上,并且仍然没有离开触摸平面的触点.【摘自https://developer.mozilla.org】
    targetTouches和touches联合起来做一个实验:
    1、在div#test上绑定touchstart事件;
    2、Fa放置在div#test, 触发一次touchstart;
    3、Fb放置在div#test以外的body上;
    4、Fc触发一次div#test上的触屏并立即抬起;
    5、Fd触发一次div#test上的touchstart;
    现象:此时我们观察两个Fa触发的touchstart事件对象和Fd触发的touchstart事件对象:
    Fa的touchstart中touches和targetTouches对象都仅仅包含一个touch对象,对应Fa的触摸点。
    Fd的touchstart中touches和targetTouches对象是一样的,包含两个touch对象,分别是Fa和Fd对应的触摸点。

touchmove事件

当触摸点在触摸平面上移动时,触发touchmove事件。
实验:
* 再次拿出touch对象,但这时我们实验一下touch对象的target属性:
简单地让Fa从div#test滑出到body区域
过程中我们记录了touchmove事件,为简单起见,我们查看最后一个touchmove的事件对象,我们发现:
现象:此时的changedTouches中的touch对象的target为div#test,所以target属性指的是触发事件时所在的元素;
我们在此又发现一个现象:
从始至终,这一系列的touchmove事件都会触发div#test上的touchmove事件回调;

  • 旨在观察当move过程中删除div#test的情况。代码如下:
    var test=document.getElementById('test');
    window.addEventListener('touchmove',function(e){
      console.log('move on the window');
      console.log(e);
    },false);
    test.addEventListener('touchmove',function(e){
      e.preventDefault();
      //e.stopPropagation();
      console.log('move on the test');
      console.log(e);
      if(e.changedTouches[0].clientY>420){
        //因为该测试中div#test的高度为400px且起点为(0,0)
        if(test.parentNode){
          test.parentNode.removeChild(test);
          console.log('remove')
        }
      }
    },false);
    
    		

我们依然简单地让Fa从div#test滑出到body区域。

现象:在控制台上可以看出:

当div#test被删除后,只执行了div#test上的touchmove, 但已经不再冒泡到window。

注意:remove打印出来之前,事件已经冒泡到了window,所以随后有一个window的touchend的回调被执行。

touchend事件

当触摸点离开屏幕时触发touchend事件。 实验: * 在div#test上触屏后离开,触点无移动

现象:触发div#test的touchend事件 * 在div#test上滑动,且过程中没有离开div#test 现象:不会触发touchend事件 * 在div#test上滑动,且最终停止到body上并抬起手指

现象:不会触发touchend事件

来源:http://sentsin.com/web/1110.html

评论(0)网络
阅读(109)喜欢(0)不喜欢(0)JavaScript/Ajax