移动端touch事件问题

Question

假如移动端的一块DIV通过绑定touch事件(touchstart touchmove touchend)想要实现: 1,点击DIV的时候,弹出一层遮罩层, 显示信息。2,按住该DIV,可以托拽。我不知道表述的是否清晰,其实我就是想知道怎么通过touchstart touchmove touchend这三个事件判断用户是点击了DIV还是按住了DIV从而响应遮罩信息或者托拽。谢谢!!

Answer 1

所以就是想区别touch事件和click事件咯？这个其实不是非常重要，因为只要你监听了touch事件的话，用户触摸屏幕就会触发事件。

（图片源：在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意？）

从图上我们就可以看出，touch和click是相互独立的，并不会说有了click就不会触发touch，有了touch就不会触发click。而且click的触发需要有一定的触摸时间，这个具体可以看一下图片源。

所以你这里最简单的做法大概就是屏蔽掉click事件就好叻。这样只会触发touch事件不会有click事件冒粗来啦。如果要共存的话，我觉得可以像图片源中所说，touchstart开始之后就记录时间，当时间超过多少ms（这个量你可以自己设置）的时候就判定为是touch。touchend的时候再判定一次时间，如果时间小于这个量就判定为click，触发click事件。

至于后续遮罩的显示非常简单咯，实现做个DOM再在touch的时候display:block显示粗来就好了。拖拽的话在touch的时候设置DOM为position:absolute，然后根据touchmove时间获得的pageX和pageY设置DOM的left和top偏移就OK拉，这个可以参考MDN上的一些示例。