了解触摸事件 [英] Understanding touch events

查看:197
本文介绍了了解触摸事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试让我的一些图书馆使用触摸设备,但我很难弄清楚它们是如何受到支持的,以及它们是如何工作的。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆