將鼠標映射到觸摸用於在桌面瀏覽器中測試移動網站的事件

Question

我目前正在開發一個也應在移動設備上工作的網站。但是因爲我（當然）大量使用Javascript，我寧願使用基於桌面的測試環境（FireFox，FireBug等）。 有什麼方法可以將鼠標事件映射到觸摸事件，以便能夠在桌面瀏覽器中測試網站，但將所有觸摸事件仿真爲移動設備？

我見過很多庫/函數以相反的方式做，但這不是我想要的。

Answer 1

我使用了一種將鍵盤映射到屏幕手勢的方法。例如，在我正在處理的網站上，如果我向左滑動，然後向右滑動，則希望網頁返回。我正在使用jQuery Mobile API。

首先我調試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(); 
    } 
    }); 

我的網頁上有以下模板

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

如果你想每個頁面做不同的事情，你一定要配合的按鍵對象到您的網頁。你的代碼看起來像這樣。

$("#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）中打開開發人員|自適應設計視圖[Ctrl + Shift + M]並點擊「模擬觸摸事件」。然後您可以使用鼠標輕掃！