Javascript 理解触摸事件

我试图让我的一些库与触摸设备一起工作，但我很难弄清楚它们是如何得到支持以及如何工作的

基本上是有，但似乎只有在

touchstart

事件（duh）上，移动浏览器才有共识。我已经创建了一个测试用例

我已经在搭载Android 4的Galaxy Note上测试过了，但是你也可以用桌面浏览器查看链接

我们的目标是试图找出如何处理水龙头，双水龙头和长水龙头。没什么特别的

基本上，情况就是这样：

Android股票浏览器不触发触摸事件。它只是尝试通过点击模拟鼠标点击，连续触发

mousedown

、

mouseup

和

click

事件，但双击只会放大和缩小页面

Android版Chrome在手指触摸屏幕时触发touchstart事件。如果它很快被释放，它就会触发

mousedown

，

mouseup

，

touchend

，最后

单击事件

如果长时间轻触，大约半秒钟后，当手指抬起时，它会触发
鼠标向下
和
鼠标右键
，并触发
触摸结束
，最后没有
单击
事件

如果移动手指，它会触发几次
touchmove
事件，然后触发
touchcancel
事件，之后不会发生任何事情，甚至在抬起手指时也不会触发
touchend
事件

双击可触发放大/缩小功能，但在事件方面，它会触发组合键
touchstart
-
touchsevent
两次，而不会触发鼠标事件

Android版Firefox会正确触发
touchstart
事件，如果短按会触发
mousedown
，
mouseup
，
touchend
并随后单击

如果长时间点击，它会触发
mousedown
，
mouseup
，最后触发
touchend
事件。这些东西和铬一样

但是，如果移动手指，如果连续触发
touchmove
（正如人们所期望的），但当手指离开事件侦听器的元素时，它不会触发
touchlave
事件，当手指离开浏览器视口时，它也不会触发
touchcancel
事件

对于双抽头，它的行为就像铬

Opera Mobile在短时间内对Chrome和Firefox做了同样的事情，但如果长时间按下，会激活某种我真的想禁用的共享功能。如果你移动手指或双击，它的行为就像Firefox一样

Chrome beta会像通常一样短按，但如果长按，它不会再触发
mouseup
事件，只需
touchstart
，然后在半秒钟后
mousedown
，然后在抬起手指时触发
touchend
。当手指移动时，现在它的行为类似于Firefox和Opera Mobile

在双击的情况下，它在缩小时不触发触摸事件，而仅在放大时触发

Chrome beta显示了最奇怪的行为，但我不能抱怨，因为它是beta版

问题是：在触摸设备最常见的浏览器中，有没有一种简单而有效的方法来检测短点击、长点击和双击

太糟糕了，我无法在iOS设备上使用Safari或IE for Windows Phone 7/Phone 8/RT对其进行测试，但如果你们中的一些人可以，我们将非常感谢你们的反馈。
是的，你们可以在
touchstart
启动计时器，然后在
touchend
上结束计时器，然后在那里进行选择

你也可以做。。。比如说滑动，我的触发
touchmove
你可以得到“手指”的坐标，看看在触发
touchend
之前我走了多少路

我不知道是否有比使用触摸事件库更简单的方法，但我想您可以很容易地为简单的“点击”、“双击”、“滑动”事件编写一个。如果您还没有，我建议您阅读Hammer.js的源代码


注释和代码之间大约有1400行，有很好的文档，代码很容易理解

您可以看到作者如何选择解决许多常见的触控事件：

按住、轻按、双击、拖动、拖动开始、拖动、拖动、拖动、拖动、拖动，
拖航，拖航，滑行，滑行，滑行，滑行，滑行，滑行，滑行，滑行，滑行，滑行，
变换，变换开始，变换结束，旋转，挤压，挤压，
按压、触摸（手势检测开始）、释放（手势检测
(完)

我认为在阅读源代码后，您将更好地了解触摸事件的工作原理以及如何识别浏览器能够处理哪些事件

以下是我对安卓4.3上触摸和鼠标事件的最新观察

Opera、Firefox和Chrome似乎有一个标准的行为
刷卡时（touchstart touchmove touchend）：

没有触发鼠标事件（不包括鼠标悬停）
仅当touchstart和touchend出现在同一元素上时，鼠标悬停才会触发。（touchstart touchmove touchend鼠标悬停）
如果在touchstart上禁止默认：默认的刷卡行为不起作用。鼠标事件触发没有发生任何变化

轻触（touchstart touchend）：

所有鼠标事件鼠标悬停鼠标移动鼠标下鼠标点击延时后触发
如果在touchstart上禁用默认设置：则仅触发鼠标悬停

Android默认浏览器有一些非标准行为：

Mouseover在touchstart之前启动，这意味着Mouseover始终启动
所有鼠标事件都会在点击时触发，即使在touchstart上阻止了默认设置
有一个非常好的资源，详细介绍了夏娃的顺序