[JQUERY] 어떻게 iPad 용 Safari에서 jQuery를 사용하여 터치 이벤트를 인식 할 수 있습니까? 그것은 수 있습니까?

어떻게 iPad 용 Safari에서 jQuery를 사용하여 터치 이벤트를 인식 할 수 있습니까? 그것은 수 있습니까?

해결법

1. ---

   1.핵심 jQuery를 터치 이벤트에 대한 아무것도 특별한을 가지고 있지 않지만, 당신은 쉽게 다음과 같은 이벤트를 사용하여 자신을 구축 할 수 있습니다

   핵심 jQuery를 터치 이벤트에 대한 아무것도 특별한을 가지고 있지 않지만, 당신은 쉽게 다음과 같은 이벤트를 사용하여 자신을 구축 할 수 있습니다

   예를 들어,하는 TouchMove

   document.addEventListener('touchmove', function(e) {
       e.preventDefault();
       var touch = e.touches[0];
       alert(touch.pageX + " - " + touch.pageY);
   }, false);
   

   이것은 대부분의 웹킷 기반 브라우저 (포함. 안드로이드)에서 작동합니다.

   여기에 몇 가지 좋은 문서입니다.

2. ---

   2.당신이 jQuery를 사용하는 경우 1.7+는 모든 다른 답변보다 더 간단합니다.

   당신이 jQuery를 사용하는 경우 1.7+는 모든 다른 답변보다 더 간단합니다.

   $('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
   

3. ---

   3.가장 간단한 방법은 Hammer.js 같은 멀티 터치 자바 스크립트 라이브러리를 사용하는 것입니다. 그런 다음 코드를 같이 쓸 수 있습니다 :

   가장 간단한 방법은 Hammer.js 같은 멀티 터치 자바 스크립트 라이브러리를 사용하는 것입니다. 그런 다음 코드를 같이 쓸 수 있습니다 :

   canvas
       .hammer({prevent_default: true})
       .bind('doubletap', function(e) { // And double click
           // Zoom-in
       })
       .bind('dragstart', function(e) { // And mousedown
           // Get ready to drag
       })
       .bind('drag', function(e) { // And mousemove when mousedown
           // Pan the image
       })
       .bind('dragend', function(e) { // And mouseup
           // Finish the drag
       });
   

   그리고 당신은 계속 할 수 있습니다. 그것은 탭, 더블 탭, 스 와이프, 보류, 변환 (즉, 핀치) 드래그를 지원합니다. 해당 마우스 동작이 일어날 때이 이벤트 핸들러의 두 세트를 작성할 필요가 없습니다 있도록 터치 이벤트는, 화재. 당신은 내가 그랬던 것처럼 jQueryish 방식으로 쓸 수 있으려면 아, 그리고 당신은 jQuery 플러그인이 필요합니다.

4. ---

   4.페이지를 스크롤하는 경우, 장치가 너무 터치 또는 탭으로 감지하기 때문에 혼자 touchstart 또는 touchend을 사용하면 좋은 솔루션이 아닙니다. 그래서, 탭을 감지하고 동시에 이벤트를 클릭하는 가장 좋은 방법은 바로 화면 (스크롤)을 이동하지 않는 터치 이벤트를 감지하는 것입니다. 이 작업을 수행 할 수 있도록, 당신의 응용 프로그램에이 코드를 추가합니다 :

   페이지를 스크롤하는 경우, 장치가 너무 터치 또는 탭으로 감지하기 때문에 혼자 touchstart 또는 touchend을 사용하면 좋은 솔루션이 아닙니다. 그래서, 탭을 감지하고 동시에 이벤트를 클릭하는 가장 좋은 방법은 바로 화면 (스크롤)을 이동하지 않는 터치 이벤트를 감지하는 것입니다. 이 작업을 수행 할 수 있도록, 당신의 응용 프로그램에이 코드를 추가합니다 :

   $(document).on('touchstart', function() {
       detectTap = true; // Detects all touch events
   });
   $(document).on('touchmove', function() {
       detectTap = false; // Excludes the scroll events from touch events
   });
   $(document).on('click touchend', function(event) {
       if (event.type == "click") detectTap = true; // Detects click events
          if (detectTap){
             // Here you can write the function or codes you want to execute on tap
   
          }
    });
   

   나는 그것을 테스트는 아이 패드와 아이폰에 나를 위해 잘 작동합니다. 이 탭을 감지하고 쉽게 탭 터치 스크롤을 구분할 수 있습니다.

5. ---

   5.당신은 예컨대 화면에 터치를위한 여러 이벤트 다음 테스트를 캡처) (CSTE 연구진은 사용할 수 있습니다 :

   당신은 예컨대 화면에 터치를위한 여러 이벤트 다음 테스트를 캡처) (CSTE 연구진은 사용할 수 있습니다 :

   $('#selector')
   .on('touchstart mousedown', function(e){
     e.preventDefault();
     var touch = e.touches[0];
     if(touch){
       // Do some stuff
     }
     else {
       // Do some other stuff
     }
   });
   

6. ---

   6.jQuery를 핵심 아무것도 특별이 없지만 다른 아이폰 OS에 비해 장치뿐만 아니라 작동 다른 터치 이벤트에 대한 jQuery를 모바일 이벤트 페이지에서 확인할 수 있습니다.

   jQuery를 핵심 아무것도 특별이 없지만 다른 아이폰 OS에 비해 장치뿐만 아니라 작동 다른 터치 이벤트에 대한 jQuery를 모바일 이벤트 페이지에서 확인할 수 있습니다.

   그들은:

   스크롤하는 동안주의는, 그 (모바일 기기에 터치 기준) 스크롤 이벤트 iOS 장비 중 DOM 조작을 정지.

7. ---

   7.나는 단지 화재에 보이기 때문에 조금, 내 프로젝트에하는 TouchMove에만 사용에 대한 걱정 때 한 위치에서 다른 위치로 터치 이동 (그리고 초기 터치에). 그래서 touchstart와 결합하고,이 작업을 매우 잘 초기 터치 및 움직임을 보인다.

   나는 단지 화재에 보이기 때문에 조금, 내 프로젝트에하는 TouchMove에만 사용에 대한 걱정 때 한 위치에서 다른 위치로 터치 이동 (그리고 초기 터치에). 그래서 touchstart와 결합하고,이 작업을 매우 잘 초기 터치 및 움직임을 보인다.

   <script>
   
   function doTouch(e) {
       e.preventDefault();
       var touch = e.touches[0];
   
       document.getElementById("xtext").innerHTML = touch.pageX;
       document.getElementById("ytext").innerHTML = touch.pageY;   
   }
   
   document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
   document.addEventListener('touchmove', function(e) {doTouch(e);}, false);
   
   </script>
   
   X: <div id="xtext">0</div>
   Y: <div id="ytext">0</div>
   

8. ---

   8.난 그냥 jQuery를 모두 1.4 1.7+ 버전의 플러그인 benmajor의 GitHub의 jQuery를 터치 이벤트를 테스트했다. 그것은 가볍고에와 결합 터치 이벤트의 완전한 세트에 대한 지원을 제공하면서 모두 완벽하게 작동합니다.

   난 그냥 jQuery를 모두 1.4 1.7+ 버전의 플러그인 benmajor의 GitHub의 jQuery를 터치 이벤트를 테스트했다. 그것은 가볍고에와 결합 터치 이벤트의 완전한 세트에 대한 지원을 제공하면서 모두 완벽하게 작동합니다.

from https://stackoverflow.com/questions/4755505/how-can-i-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible by cc-by-sa and MIT license