了解触摸事件 [英] Understanding touch events
问题描述
我正在尝试让我的一些图书馆使用触摸设备,但我很难弄清楚它们是如何受到支持的,以及它们是如何工作的。
I'm trying to make some of my libraries work with touch devices, but I'm having a hard time trying to figure out how they're supported and how they work.
基本上,有 5个触摸事件,但它似乎只有 touchstart
事件(duh)才能在移动浏览器中达成共识。我创建了一个小提琴作为测试用例。
Basically, there are 5 touch events, but it seems there's consensus among mobile browsers only on the touchstart
event (duh). I've created a fiddle as a test case.
我已经在我的Galaxy Note上使用Android 4测试了这个,但您也可以通过桌面浏览器检查链接。
I've tested this on my Galaxy Note with Android 4 on board, but you can check the link with a desktop browser too.
目标是试着弄清楚如何处理水龙头,双水龙头和长水龙头。没什么好看的。
The goal is to try to figure out how to handle taps, double taps and long taps. Nothing fancy.
基本上,这就是:
Android股票浏览器不会触发触摸事件。它只是试图用点击模拟鼠标点击,点击 mousedown
, mouseup
和点击
连续播放活动,但双击只是放大和缩小页面。
The Android stock browser doesn't fire touch events. It just tries to emulate mouse clicks with taps, firing mousedown
, mouseup
and click
events consecutively, but double taps just zoom in and out tha page.
Chrome for Android会触发touchstart事件手指触摸屏幕。如果它很快就会被释放,那么它会触发 mousedown
, mouseup
, touchend
最后点击
活动。
Chrome for Android fires the touchstart event when the finger touches the screen. If it's released soon enough, it fires then mousedown
, mouseup
, touchend
and finally click
events.
如果长按,之后大约半秒钟它发射 mousedown
和 mouseup
,以及 touchend
当手指被抬起时,最后没有点击
事件。
In case of long tap, after about half a second it fires mousedown
and mouseup
, and touchend
when the finger is lifted, with no click
event at the end.
如果你移动你的手指,它会多次触发 touchmove
事件,然后触发 touchcancel
事件,事后没有任何反应,举起手指时甚至没有 touchend
事件。
If you move your finger, it fires a touchmove
event a couple of times, then it fires a touchcancel
event, and nothing happens afterwards, not even a touchend
event when lifting the finger.
A 双击
Firefox for Android正确触发 touchstart
事件,如果发生短暂点火 mousedown
, mou seup
, touchend
和之后点击
。
Firefox for Android correctly fires the touchstart
event, and in case of short tap fires mousedown
, mouseup
, touchend
and click
afterwards.
如果长按,则会触发 mousedown
, mouseup
和终于 touchend
事件。这些东西与Chrome相同。
In case of long tap, it fires mousedown
, mouseup
and finally touchend
events. It's the same of Chrome for these things.
但如果你移动手指,如果触发 touchmove
连续(正如人们所料)但当手指离开带有事件监听器的元素时,它不触发 touchleave
事件,当手指退出浏览器视口时,不会触发 touchcancel
事件。
But if you move your finger, if fires touchmove
continously (as one may expect) but it doesn not fire the touchleave
event when the finger leaves the element with the event listener, and doesn't fire the touchcancel
event when the finger gets out of the browser viewport.
对于双击,它的行为就像Chrome一样。
For double taps, it behaves just like Chrome.
Opera Mobile 可以轻松点击Chrome和Firefox但是如果长按会激活某种我真正想要禁用的共享功能。如果您移动手指或双击,它的行为就像Firefox一样。
Opera Mobile does the same thing of Chrome and Firefox for a short tap, but in case of long press activates some sort of sharing feature that I really want to disable. If you move your finger, or double tap, it behaves just like Firefox.
Chrome测试版通常用于短按,但万一长按,它不再触发 mouseup
事件,只需 touchstart
,然后 mousedown
半秒后,当手指抬起时, touchend
。当手指移动时,现在它的行为类似于Firefox和Opera Mobile。
Chrome beta does the usual for short taps, but in case of long taps it doesn't fire the mouseup
event anymore, just touchstart
, then mousedown
after half a second, then touchend
when the finger is lifted. When the finger is moved, now it behaves like Firefox and Opera Mobile.
如果是双击,它不会触发触摸事件缩小时,但仅在放大时。
In case of double taps, it doesn't fire touch events when zooming out, but only when zooming in.
Chrome测试版显示最奇怪的行为,但我不能抱怨,因为它是测试版。
Chrome beta shows the oddest behaviour, but I can't really complain since it's a beta.
问题是:是否有一种简单的方法可以尝试在最常见的浏览器中检测短分接头,长分接头和双分接头触摸设备?
The question is: is there a simple and way to try to detect short taps, long taps and double taps in the most common browsers of touch devices?
太糟糕了我无法在使用Safari的iOS设备或Windows Phone 7 / Phone 8 / RT的IE上测试它,但如果你们中的一些人可以,您的反馈将非常感激。
Too bad I can't test it on iOS devices with Safari, or IE for Windows Phone 7/Phone 8/RT, but if some of you can, your feedback would be very appreciated.
推荐答案
如果您还没有,我建议您阅读Hammer的源代码.js
If you haven't already, I would suggest reading the source code for Hammer.js
https:// github .com / hammerjs / hammer.js / blob / master / hammer.js
在评论和代码之间大约1400行,有很好的文档,代码很容易理解。
Between comments and code it's about 1400 lines, there is great documentation and the code is easy to understand.
你可以看到作者如何选择解决很多常见的触摸事件:
You can see how the author has chosen to solve a lot of the common touch events:
按住,点击,双击,拖动,拖动启动,删除,拖动,拖放,
dragleft,dragright,swipe,swipeup ,swipeown,swipeleft,swiperight,
transform,transformstart,transformend,rotate,pinch,pinchin,
pinchout,touch(手势检测开始),release(手势检测
结束)
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch (gesture detection starts), release (gesture detection ends)
我认为在阅读完源代码后,您将更好地了解触摸事件的工作原理以及如何识别浏览器能够处理的事件。
I think after reading the source code you will have much better understanding of how touch events work and how to identify which events the browser is capable of handling.
http://eightmedia.github.io/hammer.js/
这篇关于了解触摸事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!