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

Question

我正在开发一个网站，希望它也能在移动设备上运行。但由于我使用了大量的JavaScript，因此我更喜欢在桌面测试环境中进行测试（如FireFox、FireBug等）。

有没有一种方法可以将鼠标事件映射到触摸事件，以便在桌面浏览器中测试网站，但“模拟”所有触摸操作，就像它是移动设备一样？

我已经看到很多库/函数可以实现反过来的操作，但那不是我想要的。

- Laph

Answer 1

我使用一种方法，将键盘映射到屏幕手势上。例如，在我正在工作的网站上，如果我向左滑动，我希望页面返回上一页；如果我向右滑动，我希望进入下一页。我正在使用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对象与你的页面绑定。你的代码应该像这样:

如果您想让每个页面执行不同的操作，则应将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 == "#"来将其他键映射到其他手势。希望这能帮到你！

- Jesse E. Stark

Answer 2

在Firefox（29）中打开“开发者|响应式设计视图”[Ctrl + Shift + M]，然后单击“模拟触摸事件”。然后您可以使用鼠标进行滑动！

- mkmelin