Question

I’m currently developing a website that should also work on mobile devices. But since I’m (of course) heavily using Javascript, I would prefer to have Desktop-based testing environment (FireFox, FireBug, etc.).
Is there some way to map Mouse Events to Touch Events to be able to test the Website in a Desktop Browser, but “simulating” all the touch stuff as if it were a Mobile Device?

I’ve seen many libraries/functions to do it the other way around, but that’s not what I want.

Answer 1

I use a method where I map the keyboard to screen gestures. For example, on a site I’m working on, I want the page to go back if I swipe left and go next if I swipe right. I’m using the jQuery Mobile API.

First my debugger tooler:

$(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();
     }
     });

My pages have the following template

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

If you want each page to do something different, you should tie the keypress object to your page. You’re code would look something like this.

$( "#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();
          }
     });

You can map other keys to other gestures by simply changing the event.which == “#” in the debugger code.

Hope that helps!