如何在浏览器中精确控制触摸事件

Question

我正在写一个移动网页。我想了解如何精确控制触摸事件。我可以做一些事情，比如当触摸事件开始和结束时看到元素，但管理中间发生的事情似乎很困难。

我想要一个简单的按钮：

• 从A类开始，
• 在touchstart上，获得一个不同的B类（“hoverstate”），
• 当触摸事件在单击的元素上结束时，它将获得不同的类C，
• 当触摸事件在最初点击的元素上而不是时，将还原为原始类A，
• 当触摸事件停止在元素上方（但尚未结束）时，元素将恢复为A类，并且
• 如果触摸事件停止在元素上方，但返回再次在元素上（所有相同的触摸事件 - 即没有touchend或touchcancel），则返回到< em> B 再次（hoverstate）

另外我想确保：

• 在一个按钮上启动的点击事件不会干扰其他按钮上的类
• 如果里面有按钮（比如文字跨度），它们不会干扰任何状态
• 理想情况下，我可以批量执行此操作（即$（'。everyButton'）。on（'whatever'，....）

我正在使用jQuery，但任何事情都会有所帮助。这似乎应该很容易，但我一直很难让它做我想做的事情。任何人都有一个很好的设计吗？

Answer 1

你应该看看hammer.js http://eightmedia.github.io/hammer.js/也许这就是你所需要的。

Answer 2

由于没有触摸库似乎提供这个，我创建了一个：https://github.com/fresheneesz/touchjs。自述页面中没有任何文档 - 它现在都在源代码中。我很快就会把信息放在自述文件上。