移动端事件

移动端事件

移动端触摸事件

  • touchstart

    • 当手指放在屏幕上出发

  • touchmove

    • 当手指在屏幕上滑动时，连续触发

  • touchend

    • 当手指从屏幕离开时触摸

  • touchcancel

    • 当系统停止跟踪时触发(在拖动中断时候触发)，系统什么时候取消，文档没有明确的说明。

由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。

触摸事件还包含下列三个用于跟踪触摸的属性：

  • touches：表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时，event.touches.length=1, 当两个手指在触屏上时，event.touches.length=2，以此类推。

  • targetTouches：特定于事件目标的touch对象数组。

因为touch事件是会冒泡的，所以利用这个属性指出目标对象。

  • changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组。

  • 每个touch对象都包含下列几个属性：

    • clientX：触摸目标在视口中的x坐标。

    • clientY：触摸目标在视口中的y坐标。

      • clientX/clientY不包括对象滚动而隐藏的偏移量

    • identifier：标识触摸的唯一ID。

    • pageX：触摸目标在页面中的x坐标。

    • pageY：触摸目标在页面中的y坐标。

      • pageX/pageY包括对象滚动而隐藏的偏移量。

    • screenX：触摸目标在屏幕中的x坐标。

    • screenY：触摸目标在屏幕中的y坐标。

      • screenX/screenY代表事件发生的位置对于屏幕的偏移量

    • target：触摸的DOM节点目标。

    • offsetX/offsetY

      • 触摸目标相对与这个DOM元素左上角的定位，不要边框，在边框上会是负数。

      • layerX/Y是兼容FF的写法。

    EventUtil.addHandler(div,"touchstart",function(event){
        div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;
    });
    EventUtil.addHandler(div,"touchmove",function(event){
        event.preventDefault();
        div.innerHTML=event.touches[0].clientX;
    });
    EventUtil.addHandler(div,"touchend",function(event){
        div.innerHTML=event.changedTouches[0].clientY;
    });

使用clientX……时，必须要指明具体的touch对象，而不要直接指明数组。

event.touches[0]在touchend事件处理函数中，当该事件发生时，touches里面已经没有任何的touch对象了，此时，就要使用changeTouches集合。

参考：http://www.jianshu.com/p/832f36531df9 ，http://www.th7.cn/Design/idea/201305/153435.shtml

触摸事件顺序

事件的触发过程为：mousedown -> mouseup -> click 三步。

手机上响应 click 事件会有300ms的延迟，但可以添加一下meta标签去除：

<meta name="viewport" content="width=device-width">

点击穿透

而由于click事件的滞后性（300ms），在这300ms内上层元素隐藏或消失了，下层同样位置的DOM元素触发了click事件（如果是input框则会触发focus事件），看起来就像点击的target“穿透”到下层去了。

解决方法：

  • 遮挡

元素消失可以使用fade效果。

或者在点击处生成一个透明的元素，在一定时间后移除。

  • pointer-events

    当时属性值为none， 元素不再是鼠标事件的目标。

    • fastclick

    fastclick是一个开源库，其思路是取消click事件，用touchend模拟快速点击行为。

也来说说touch事件与点击穿透问题

手势事件

  • gesturestart：当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发。

  • gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。

  • gestureend：当任何一个手指从屏幕上面移开时触发。

【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

1、当一个手指放在屏幕上时，会触发touchstart事件，如果另一个手指又放在了屏幕上，则会触发gesturestart事件，随后触发基于该手指的touchstart事件。

2、如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。

手势的专有属性:

  • rotation：表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从零开始。

  • scale：表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始，并随距离拉大而增长。

PreviousJavaScript数值Next函数

Last updated

Was this helpful?