iPad 용 Safari에서 jQuery를 사용하여 터치 이벤트를 인식하려면 어떻게해야합니까? 가능합니까?

jQuery를 사용하여 iPad의 Safari 브라우저에서 터치 이벤트를 인식 할 수 있습니까?

웹 응용 프로그램에서 mouseOver 및 mouseOut 이벤트를 사용했습니다. mouseOut 및 mouseMove와 같은 이벤트가 없기 때문에 iPad의 Safari 브라우저와 유사한 이벤트가 있습니까?

핵심 jQuery에는 터치 이벤트에 특별한 것이 없지만 다음 이벤트를 사용하여 쉽게 자신의 것을 만들 수 있습니다.

• 터치 스타트
• 터치
• 터치
• 터치 취소

예를 들어 touchmove

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

이것은 대부분의 WebKit 기반 브라우저 (Android 포함)에서 작동합니다.

여기 좋은 문서가 있습니다.

jQuery 1.7 이상을 사용하는 경우 다른 모든 답변보다 훨씬 간단합니다.

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

가장 간단한 방법은 Hammer.js와 같은 멀티 터치 JavaScript 라이브러리 를 사용하는 것입니다 . 그런 다음 다음과 같은 코드를 작성할 수 있습니다.

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 플러그인이 필요합니다.

터치 시작 또는 터치 엔드 만 사용하는 것은 좋은 해결책이 아닙니다. 페이지를 스크롤하면 장치가 해당 페이지를 터치 또는 탭으로 감지하기 때문입니다. 탭과 클릭 이벤트를 동시에 감지하는 가장 좋은 방법은 화면을 움직이지 않는 터치 이벤트 만 감지하는 것입니다 (스크롤). 이를 위해서는 애플리케이션에 다음 코드를 추가하십시오.

$(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

       }
 });

나는 그것을 테스트했으며 iPad와 iPhone에서 잘 작동합니다. 탭을 감지하여 탭과 터치 스크롤을 쉽게 구분할 수 있습니다.

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

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

jQuery Core에는 특별한 것이 없지만 jQuery Mobile Events 페이지에서 다양한 터치 이벤트에 대해 읽을 수 있으며 iOS 장치 이외의 다른 기기에서도 작동합니다.

그들은:

• 꼭지
• 꼭지점
• 강타
• 왼쪽으로 밀으시오
• 스 와이프

또한 스크롤 이벤트 (모바일 장치의 터치 기반) 중에 iOS 장치는 스크롤하는 동안 DOM 조작을 정지시킵니다.

내 프로젝트에 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>

방금 1.4 및 1.7+ 버전의 jQuery에 대해 benmajor의 GitHub jQuery Touch Events 플러그인 을 테스트 했습니다 . 그것은 경량이며, 모두 완벽하게 작동 on하고 bind터치 이벤트의 완전한 세트에 대한 지원을 제공하면서.