클릭 이벤트와 마찬가지로 'touchstart'이벤트에 대해 e.PageX 위치에 해당하는 것이 있습니까?


104

라이브 기능과 함께 사용되는 touchstart 이벤트의 jQuery로 X 위치를 얻으려고 해요?

$('#box').live('touchstart', function(e) { var xPos = e.PageX; } );

이제 이것은 이벤트로 '클릭'으로 작동합니다. 어떻게 ( 알파 jQuery Mobile 을 사용하지 않고 ) 터치 이벤트로 얻을 수 있습니까?

어떤 아이디어?

도움을 주셔서 감사합니다.


나는이에 도움이 필요한 사람들이 발견 : - stackoverflow.com/questions/3183872/... 또한 touchstart에서 작동합니다.
waxical

답변:


180

약간 늦었지만 jQuery가 마사지 한 이벤트가 아닌 원래 이벤트에 액세스해야합니다. 또한 이러한 이벤트는 멀티 터치 이벤트이므로 다른 변경이 필요합니다.

$('#box').live('touchstart', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

다른 손가락을 원하는 경우 터치 목록의 다른 색인에서 찾을 수 있습니다.

최신 JQUERY 업데이트 :

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});

당신은 끝에 누락 종료 괄호를 가지고, 그것은해야한다 :})
SteveLacy

맞아요. 2 년 동안 아무도 눈치 채지 못한 것에 놀랐습니다! =) 감사합니다!
mkoistinen

불행히도 나를 위해 작동하지 않았기 때문에 첫 번째에서 x와 y를 얻어야했습니다 touchmove.
andrewb

@andrewb, 추가 e.preventDefault()touchstart이벤트 핸들러.
matewka

고마워 친구. 그럼 e.touches[0].pageX;나를 위해 일한
얀트 Varshney에게

43

JQuery 기반 프로젝트에이 간단한 기능을 사용합니다.

    var pointerEventToXY = function(e){
      var out = {x:0, y:0};
      if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        out.x = touch.pageX;
        out.y = touch.pageY;
      } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        out.x = e.pageX;
        out.y = e.pageY;
      }
      return out;
    };

예:

$('a').on('mousedown touchstart', function(e){
  console.log(pointerEventToXY(e)); // will return obj ..kind of {x:20,y:40}
})

이것이 당신에게 유용하기를 바랍니다;)


13
e.pageX는 터치 이벤트에 대해 정의되지 않으므로 이벤트 유형을 확인할 필요가 없습니다. 그냥하세요out.x = e.pageX || e.originalEvent.touches[0].pageX;
Griffin

1
돌아 가기 전에이 부분을 추가하여 누구에게나 도움이되는 경우 부모 요소를 기반으로 백분율 위치를 얻습니다. var offsetParent = e.target.offsetParent; var parentLeft = e.target.offsetParent.offsetLeft; out.percentX = (out.x-offsetParent.offsetLeft) / offsetParent.offsetWidth; out.percentY = (out.y-offsetParent.offsetTop) / offsetParent.offsetHeight; 반환;
sradforth

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?
gil9red

@Griffin-귀하의 제안에 대한 문제는 데스크톱에서 마우스가 문서의 왼쪽 가장자리에있을 때 진술의 첫 번째 분기가 0을 산출하고 이는 거짓으로 해석되고 터치로 인해 브라우저 오류가 발생한다는 것입니다. 두 번째 분기에서 정의되지 않았습니다. 동의하다?
MSC

13

여기에 다른 답변 중 일부를 시도했지만 originalEvent도 정의되지 않았습니다. 검사 후 TouchList 클래스 속성 (다른 포스터에서 제안한대로)을 발견하고 다음과 같은 방법으로 pageX / Y에 도달했습니다.

var x = e.changedTouches[0].pageX;

4
이것은 모든 자바 스크립트 기반 코드에서 잘 작동합니다. screw jquery
Martian2049

2
나의 구세주! touchmove ()에서도 완벽하게 작동합니다.
Tibix


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.