You are here
移动端touch事件问题
星期二, 2016-08-16 10:13 — adminshiping1
假如移动端的一块DIV通过绑定touch事件(touchstart touchmove touchend)想要实现: 1,点击DIV的时候,弹出一层遮罩层, 显示信息。2,按住该DIV,可以托拽。我不知道表述的是否清晰,其实我就是想知道怎么通过touchstart touchmove touchend这三个事件判断用户是点击了DIV还是按住了DIV从而响应遮罩信息或者托拽。谢谢!!
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上的一些示例。
来自 https://segmentfault.com/q/1010000000595302
普通分类: