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

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

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

마우스 오버와 마우스를 사용했습니다.웹 응용 프로그램에서 이벤트를 내보냅니다.mouseOut과 mouseMove와 같은 이벤트가 없는데 iPad의 Safari 브라우저와 유사한 이벤트가 있습니까?

Core 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... */ } });

페이지를 스크롤하면 단말기가 터치 또는 탭으로 인식하기 때문에 터치 시작 또는 터치 끝만 사용하는 것은 좋은 해결책이 아닙니다.따라서 탭 및 클릭 이벤트를 동시에 감지하는 가장 좋은 방법은 화면을 움직이지 않는 터치 이벤트만 감지하는 것입니다(스크롤).이렇게 하려면 응용 프로그램에 다음 코드를 추가하면 됩니다.

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

       }
 });

제가 테스트해봤는데 아이패드와 아이폰에서 잘 작동합니다.탭을 감지하고 탭과 터치 스크롤을 쉽게 구분할 수 있습니다.

가장 간단한 방법은 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 플러그인이 필요합니다.

.on()을 사용하여 여러 이벤트를 캡처한 다음 화면에서 터치 테스트를 수행할 수 있습니다. 예:

$('#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에는 특별한 기능이 없지만, iOS 이외의 기기에서도 작동하는 다양한 터치 이벤트에 대한 정보는 jQuery Mobile Events 페이지에서 확인할 수 있습니다.

다음과 같습니다.

• 톡톡 두드리다
• 탁상공론
• 스와이프
• 왼쪽으로 스와이프
• 교환권

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

제 프로젝트에 터치 무브만 사용하는 것이 조금 걱정되었습니다. 왜냐하면 터치 무브는 처음 터치할 때가 아니라 한 위치에서 다른 위치로 이동할 때만 작동하는 것 같기 때문입니다.그래서 저는 터치스타트와 결합했고, 이것은 초기 터치와 모든 움직임에 매우 효과적인 것으로 보입니다.

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

방금 jQuery 1.4 및 1.7+ 버전 모두에 대해 Benmajor의 GitHubjQuery Touch Events 플러그인을 테스트했습니다.이 제품은 가볍고 두 제품 모두에서 완벽하게 작동합니다.on그리고.bind다양한 터치 이벤트를 지원합니다.

언급URL : https://stackoverflow.com/questions/4755505/how-can-i-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible