JS—触摸事件、手势事件

最近开发手机网页时遇到下拉加载更多功能，开始解决思路是监听滚动条位置，到底部时触发加载事件。在电脑模拟手机和安卓上运行正常，测试苹果时出问题。搜索后发现是苹果的“橡皮筋”弹性滑动导致，并且这个是系统所带，无法禁止。于是开始换思路，用触摸事件来解决。以下为学习总结：

 

①触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。

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

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

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

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明

 

注意：以上事件都会冒泡，虽然触摸事件没有在DOM规范中定义，但他们却是以兼容DOM的方式实现的。所以每个触摸事件的event对象都提供了在鼠标事件中常见的属性，

 

②兼容情况：

支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。

 

 

③事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！

W3C DOM把事件对象作为事件处理函数的第一个参数传入进去

IE将事件对象作为window对象的一个属性（相当于全局变量）

 

④针对鼠标事件，有哪些不适应？

1.dbclick

触屏设备不支持双击事件。双击浏览器窗口，会放大画面。

可以通过在head标签内加上这么一行：  <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

这样页面不会随着用的手势而放大缩小

2.mouse

mouse

在触屏上，我们单击一个元素，会相应的触发：mousemove mousedown mouseup click，所以当我们编写移动客户端界面时，可以为元素直接添加move事件，可以提高效率。

同时也会触发mouseover与mouseout，测试结果，我发现，只有当页面第一次刷新时，单击元素，参会触发mouseover事件。

 

随着触屏移动端设备的普及使用，W3C开始制定TouchEvent（触摸事件）规范。

 

1.触摸事件

该类事件会在用户手指放在屏幕上面时，在屏幕上滑动时，或从屏幕上移开时触发。

具体来说有以下几个触摸事件。

touchstart当手指放在屏幕上触发。

touchmove当手指在屏幕上滑动时，连续地触发。

touchend当手指从屏幕上离开时触发。

touchcancel当系统停止跟踪时触发，系统什么时候取消，文档没有明确的说明。

【总】以上四个，是w3c提供的触摸事件，只针对触摸设备，最常用的是前三个。

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

 

2.跟踪属性

除了常用的DOM属性外，触摸事件还包含了三个触摸的跟踪属性

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

当一个手指在触屏上时，event.touches.length=1,

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

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

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

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

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

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

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

identifier：标识触摸的唯一ID

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

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

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

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

target：触摸的DOM节点目标。

【如何使用呢？】

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集合。

 

3.手势事件

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

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

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

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

 

4.触摸事件与手势事件之间的关系

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

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

 

5.手势的专有属性

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

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