Touch组件实现原理

Touch组件的实现主要解决了在pc端和移动端拖拽元素的功能。

PC端：

依靠事件： mousedown，mousemove，mouseup的鼠标事件。
过程：

1. mousedown事件中记录当前元素位置信息，对元素绑定mousemove，mouseup事件。
2. mousemove事件函数，在移动元素的时候获取当前鼠标的位置来改变元素位置属性。其中可以计算获取移动时x，y方向最大的值，从而给元素设置一个移动范围。
3. mouseup事件中主要处理取消事件绑定等操作。

移动端：

依靠事件： touchstart，touchmove，touchend，touchcancel事件
过程：

1. touchstart事件中保存当前元素的位置信息，对元素绑定touchmove，touchend，touchcancel事件。在此事件函数加上了代码event.preventDefault()来阻止touch事件的默认动作——滚动屏幕，因为不想让屏幕动来动去。
2. touchmove事件函数，在移动元素的时候从changedTouches数组中获取当前手指接触屏幕的位置，然后改变元素的位置信息。同样也可以设定一个移动范围来控制元素移动。
3. 在touchend, touchcancel中进行取消事件绑定等操作。其中touchend和touchcancel的区别在于，touchcancel是系统的控件影响了touch功能，例如突然弹出一个对话框，这个时候就会触发touchcancel事件。而touchend事件是正常用户移开手指后所触发的事件。

下面补充下关于touch事件的一些知识：

Touch事件流：

touchstart 触摸开始（手指放在触摸屏上）
touchmove 拖动（手指在触摸屏上移动）
touchend 触摸结束（手指从触摸屏上移开）
touchcancel，是在拖动中断时候触发。

三个Touch列表：

1. touches ：当前位于屏幕上的所有手指的一个列表。
2. targetTouches ：位于当前DOM元素上的手指的一个列表。
3. changedTouches ：涉及当前事件的手指的一个列表。

也许你有一个疑问了，在移动端为什么不能用mousedown，mousemove，mouseup事件呢？

移动客户端也是支持mouse事件的。于是做了一个测试，在移动端对一个元素绑定需要的mouse事件，touch事件，click事件，点击或是移动观察事件响应的情况，发现：

1. 三类事件的响应从快到慢顺序为：touch事件 > mouse事件 > click事件。
2. touchmove事件触发时，mouse和click事件就不会触发。
3. 只绑定click事件，稍微有点移动元素的操作下，click事件不被触发。

从上面的测试结果可以发现：
移动客户端是支持mouse，click事件的，但是最好在移动端的时候还是绑定touch事件。这个是客户端针对移动环境下的特殊处理。