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

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 =="#",即可将其他键映射到其他手势.

希望有所帮助!