在PC浏览器上模拟触摸事件

Question

我正在开发一款针对iPad的HTML应用程序，因此它使用了触摸事件和webkit-CSS动画。

到目前为止，由于其强大的开发者模式，我一直将Chrome作为我的调试环境。

我想要的是能够在我的PC上使用Google Chrome的调试器来调试我的Html / JavaScript，并通过鼠标模拟触摸事件。

我的网站没有任何多点触控事件和鼠标事件（iPad上没有鼠标）。

实际上，我对看到应用程序的布局并不感兴趣，而更在意调试其行为。

是否有一些插件可以将桌面浏览器上的鼠标事件转换为触摸事件？

- eshalev

---

没有什么比在真实设备上调试您的网站更好（特别是如果您决定支持多点触控）。幸运的是，现在在Chrome移动版中进行调试非常容易，您可以通过PC远程调试。您也可以通过Wi-Fi连接到ADB，无需USB电缆。 - rustyx

请点击此处查看有关如何在Google Chrome中测试触摸行为的内容。 - Code Spy

Answer 1

截至2012年4月13日

在Google Chrome的开发者和金丝雀版本中，现在有一个“模拟触摸事件”的复选框。

您可以通过打开F12开发工具并单击屏幕右下角的齿轮来找到它。

目前（Chrome ver.36.0.1985.125），您可以在此处找到它：F12 => Esc => Emulation。

- Simon Sarris

---

没有复选框供我使用。Chrome 18.0 OS X Lion。我点击了小齿轮，但是没有相应的复选框！ - user986408

“模拟触摸事件”在Chrome 19及以上版本中可用。 - Sam Dutton

“模拟触摸事件”实际上是什么意思？ - user663031

当按住鼠标并像移动手指一样移动鼠标时，您可以“使用”这些触摸事件。说实话，这并没有得到很好的实现，并且仅适用于一个手指，因为...嗯...我们只有一个鼠标光标（或者您有一个多点触控笔记本电脑触摸板）。 - Sliq

节省了我尝试集成许多不必要的库。 - Obi

Answer 2

桌面浏览器可以通过导入额外的JS + CSS来模拟触摸事件。

请参考以下链接：

1. addTouch
2. Phantom Limb

- Vlad

---

@奇怪...thumbs.js呈现了我所期望的任何触摸字段都没有的触摸事件（例如"touches"）！ - Michael

Answer 3

在桌面浏览器上模拟多点触控的另一种方式是使用Hammer.js的Touch Emulator

- Corne

Answer 4

我们使用这个脚本：http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ 它可以让你的应用程序中的所有鼠标事件都被触摸事件触发。因此，由于我们已经有一个使用右键单击、拖放等功能的Web应用程序，它允许我们使用触摸来执行所有相同的功能。

我知道这几乎与您所寻找的模拟相反（您将不得不编写脚本，使应用程序主要通过鼠标使用），但我希望它仍然能有所帮助。

- bishbashbosh

Answer 5

如果你的目标是Webkit（包括iPad等设备），你可以依赖于普通的事件处理程序代码（add/removeEventListener）。考虑到这一点，你可能只需要在几个事件上进行分支 - 例如，“ontouchstart”根据环境变成“onclick”。

我不知道有哪些库提供这种级别的分支，但自己做起来很容易。

- Ryan McGrath

---

谢谢，这就是我现在正在做的事情。但是... 我的大部分代码涉及编写引人入胜的自定义控件，这意味着每个控件在被触摸时都有自己独特的行为。因此，我正在寻找一段可以在文档级别上完成此操作的 javas-cript 代码（同时保持每个不同文档元素的独立 OnTouch）。或者也许一个浏览器插件。这似乎是一个足够通用的要求（从桌面浏览器调试移动 Web 站点...） - eshalev