iPad 용 Safari에서 jQuery를 사용하여 터치 이벤트를 인식하는 방법은 무엇입니까?

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);

이것은 대부분의 웹킷 기반 브라우저 (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 wanna execute on tap

       }
 });

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

---

You can use .on() to capture multiple events and then test for touch screen, e.g.:

$('#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 doesn't have anything special, but you can read on jQuery Mobile Events page about different touch events, which also work on other than iOS devices as well.

They are:

• tap
• taphold
• swipe
• swipeleft
• swiperight

Notice also, that during scroll events (based on touch on mobile devices) iOS devices freezes DOM manipulation while scrolling.

---

I was a little bit worried about using only touchmove for my project, since it only seems to fire when your touch moves from one location to another (and not on the initial touch). So I combined it with touchstart, and this seems to work very well for the initial touch and any movements.

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

---

I know I am a little late on this but just tested benmajor's GitHub jQuery Touch Events plugin for both 1.4 and 1.7+ versions of JQuery. It is lightweight and works perfectly with both on and bind while providing support for an exhaustive set of touch events.

참고URL : https://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible