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