Touch组件实现原理

时间:2024-08-16 15:06:26

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事件。这个是客户端针对移动环境下的特殊处理。