Сопоставление событий мыши и касания для тестирования мобильных веб-сайтов в настольных браузерах - PullRequest
Новая
       13

Сопоставление событий мыши и касания для тестирования мобильных веб-сайтов в настольных браузерах

5 голосов
/ 15 февраля 2011

В настоящее время я занимаюсь разработкой веб-сайта, который также должен работать на мобильных устройствах.Но поскольку я (конечно) интенсивно использую Javascript, я бы предпочел иметь среду тестирования на основе рабочего стола (FireFox, FireBug и т. Д.).Есть ли способ сопоставить события мыши с событиями касания, чтобы можно было тестировать веб-сайт в браузере рабочего стола, но «имитировать» все сенсорные элементы, как если бы это было мобильное устройство?библиотеки / функции, чтобы сделать это наоборот, но это не то, что я хочу.

Ответы [ 2 ]

7 голосов
/ 07 марта 2011

Я использую метод, в котором я сопоставляю клавиатуру с жестами экрана. Например, на сайте, над которым я работаю, я хочу, чтобы страница вернулась назад, если я проведу пальцем влево, и пойду дальше, если я проведу вправо. Я использую 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()
     });

Если вы хотите, чтобы каждая страница выполняла что-то свое, вы должны привязать объект нажатия к своей странице. Ваш код будет выглядеть примерно так. 

$( "#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 == "#" в коде отладчика.

Надеюсь, это поможет!

0 голосов
/ 16 мая 2014

В Firefox (29) откройте Developer |Адаптивный дизайн Откройте [Ctrl + Shift + M] и нажмите «Имитация сенсорных событий».Затем вы можете использовать мышь, чтобы провести!

...