마우스를 터치하여 데스크탑 브라우저의 모바일 웹 사이트를 테스트하기위한 이벤트

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]을 클릭하고 "Touch Events 시뮬레이션"을 클릭하십시오. 그런 다음 마우스를 사용하여 스 와이프 할 수 있습니다!