我正在尝试让我的一些库与触摸设备一起使用,但我很难弄清楚它们是如何支持的以及它们是如何工作的。
基本上有5个触摸事件 https://developer.mozilla.org/en-US/docs/DOM/Touch_events,但移动浏览器之间似乎仅在以下方面达成了共识:touchstart
事件(废话)。我创建了一个fiddle http://jsfiddle.net/cpUsA/4/作为测试用例。
我已经在搭载 Android 4 的 Galaxy Note 上对此进行了测试,但您也可以使用桌面浏览器检查该链接。
目标是尝试弄清楚如何处理轻击、双击和长击。没有什么花哨。
基本上,发生的情况是这样的:
The Android股票浏览器不触发触摸事件。它只是尝试通过点击来模拟鼠标点击,射击mousedown
, mouseup
and click
连续事件,但双击只会放大和缩小页面。
Chrome对于 Android,当手指触摸屏幕时会触发 touchstart 事件。如果它发布得足够快,它就会被触发mousedown
, mouseup
, touchend
最后click
events.
的情况下long tap,大约半秒后它会点火mousedown
and mouseup
, and touchend
当手指抬起时,没有click
事件在最后。
If you 动动你的手指,它会激发一个touchmove
事件几次,然后触发touchcancel
事件,之后什么也没有发生,甚至没有touchend
抬起手指时发生的事件。
A 双击触发放大/缩小功能,但按事件触发组合touchstart
-touchevent
两次,没有触发任何鼠标事件。
Firefox对于 Android 正确触发touchstart
事件,以及短时水龙头火灾的情况mousedown
, mouseup
, touchend
and click
然后。
的情况下long tap,它点火mousedown
, mouseup
最后touchend
事件。对于这些事情,Chrome 是一样的。
但如果你动动你的手指,如果发生火灾touchmove
连续地(正如人们所期望的那样)但它并没有not开火touchleave
当手指离开具有事件侦听器的元素时发生的事件,并且不会触发touchcancel
当手指离开浏览器视口时发生事件。
For 双击,它的行为就像 Chrome 一样。
歌剧移动只需短按一下,就会执行与 Chrome 和 Firefox 相同的操作,但长按会激活某种我真的想禁用的共享功能。如果您移动手指或双击,它的行为就像 Firefox 一样。
Chrome 测试版对于短按,它会执行通常的操作,但在长按的情况下,它不会触发mouseup
事件不再,只是touchstart
, then mousedown
半秒后,然后touchend
当手指抬起时。当手指移动时,现在它的行为就像 Firefox 和 Opera Mobile。
的情况下双击,它不会触发触摸事件当缩小时,但仅限于放大时。
Chrome 测试版显示了最奇怪的行为,但我不能真正抱怨,因为它是测试版。
问题是:有没有一种简单的方法来尝试检测触摸设备最常见的浏览器中的短按、长按和双击?
遗憾的是,我无法在带有 Safari 的 iOS 设备或 Windows Phone 7/Phone 8/RT 的 IE 上测试它,但如果你们中的一些人可以,我们将非常感谢您的反馈。