Question

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

我已经看到许多库/函数以相反的方式执行它，但这不是我想要的。

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对象绑定到页面。你的代码看起来像这样。

$( "#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 ==“＃”，即可将其他键映射到其他手势。

希望有所帮助！

Answer 2

在Firefox（29）中打开Developer |响应式设计视图[Ctrl + Shift + M]并单击＆＃34;模拟触摸事件＆＃34;。然后，您可以使用鼠标滑动！

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

2 个答案: