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

【问题标题】：Simulating touch events on a PC browser在 PC 浏览器上模拟触摸事件
【发布时间】：2011-06-22 14:18:02
【问题描述】：

我正在为 iPad 开发一个 HTML 应用程序。因此，它利用了触摸事件和 webkit-CSS 动画。

到目前为止，我一直使用 chrome 作为我的调试环境，因为它是非常棒的开发者模式。

我希望能够在我的 PC 上使用 Google-Chrome 的调试器调试我的 Html/JavaScript，同时用我的鼠标模拟触摸事件。

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

我实际上对查看应用程序布局并不感兴趣，而是对调试其行为感兴趣。

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

【问题讨论】：

在真实设备上调试您的网站是无可替代的（尤其是如果您决定支持多点触控）。幸运的是，现在在 Chrome 手机中调试是very easy，您可以通过您的 PC 远程调试。您也可以通过 Wi-Fi 连接到 ADB，无需 USB 数据线。
检查这里freakyjolly.com/how-to-test-touch-behavior-in-google-chrome

【解决方案1】：

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

【讨论】：

【解决方案2】：

截至 2012 年 4 月 13 日

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

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

现在（Chrome ver.36.0.1985.125）你可以在这里找到它：F12 => Esc => Emulation。

【讨论】：

我没有复选框。铬 18.0 osx 狮子。点击了小齿轮，但没有复选框！
模拟触摸事件在 Chrome 19 及更高版本中。
“模拟触摸事件”究竟是什么意思？
您可以在按住鼠标按钮并像移动手指一样移动鼠标时“使用”这些触摸事件。老实说，这并没有很好地实现，只适用于一根手指，因为......好吧......我们只有一个鼠标光标（或者你有一个多点触控笔记本电脑触摸板）
节省了我尝试集成很多不必要的库

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

我知道这几乎与您正在寻找的模拟相反（您必须编写应用程序的脚本以主要由鼠标使用），但我希望它无论如何都会有所帮助。

【讨论】：

【解决方案5】：

如果您专门针对 Webkit（iPad 和所有设备），您可以依赖正常的事件处理程序代码（add/removeEventListener）。考虑到这一点，您可能只需要在几个事件上进行分支 - 例如，“ontouchstart”会根据环境变为“onclick”。

不过，我不知道有任何库提供这种级别的分支。自己做很容易。

【讨论】：

谢谢，这就是我现在正在做的事情。但是...，我的很多代码都与编写引人入胜的自定义控件有关，这意味着每个控件在被触摸时都有自己独特的行为。所以我正在寻找一个可以在文档级别执行一次的 javas-cript（同时为每个不同的文档元素维护独立的 OnTouch。）。或者也许是一个浏览器插件。这似乎是一个足够通用的要求（从桌面浏览器调试移动网站......）