将鼠标映射到触摸事件以在桌面浏览器中测试移动网站答案

【问题标题】：Mapping Mouse to Touch Events for testing Mobile Websites in Desktop browsers将鼠标映射到触摸事件以在桌面浏览器中测试移动网站
【发布时间】：2011-06-27 10:29:44
【问题描述】：

我目前正在开发一个也可以在移动设备上运行的网站。但由于我（当然）大量使用 Javascript，所以我更愿意拥有基于桌面的测试环境（FireFox、FireBug 等）。有没有办法将鼠标事件映射到触摸事件，以便能够在桌面浏览器中测试网站，但“模拟”所有的触摸内容，就好像它是移动设备一样？

我见过很多库/函数可以反过来做，但这不是我想要的。

【问题讨论】：

标签： jquery web-applications mobile touch

【解决方案1】：

在Firefox（29）中打开Developer |响应式设计视图 [Ctrl + Shift + M] 并单击“模拟触摸事件”。然后就可以用鼠标滑动了！

【讨论】：

【解决方案2】：

我使用一种将键盘映射到屏幕手势的方法。例如，在我正在处理的网站上，如果我向左滑动，我希望页面返回，如果我向右滑动，我希望页面返回下一个。我正在使用 jQuery Mobile API。

首先是我的调试工具：

$(document).keypress(function(event) {
     // Simulate Left Flick (A)
     if (event.which == '97') {
          alert('LEFT FLICK');
          SomeFunction1();
     }
     // Simulate Right Flick (D)
     if (event.which == '100') {
          alert('RIGHT FLICK');
          SomeFunction2();
     }
     });

我的页面有以下模板

$( "#Page" )
     .live('swipeleft',function() {
          SomeFunction1();
     })
     .live('swiperight',function() {
          SomeFunction2()
     });

如果您希望每个页面做不同的事情，您应该将 keypress 对象绑定到您的页面。你的代码看起来像这样。

$( "#Page" )
     .live('swipeleft',function() {
          SomeFunction1();
     })
     .live('swiperight',function() {
          SomeFunction2()
     })
     .keypress(function(event) {
          // Simulate Left Flick (A)
          if (event.which == '97') {
               alert('LEFT FLICK');
               SomeFunction1();
          }
          // Simulate Right Flick (D)
          if (event.which == '100') {
               alert('RIGHT FLICK');
               SomeFunction2();
          }
     });

您可以通过简单地更改调试器代码中的 event.which == "#" 将其他按键映射到其他手势。

希望有帮助！

【讨论】：