Czy istnieje odpowiednik pozycji e.PageX dla zdarzenia „touchstart”, tak jak w przypadku zdarzenia kliknięcia?

104

Próbuję uzyskać pozycję X za pomocą jQuery zdarzenia touchstart, używanego z funkcją na żywo?

To znaczy

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

Teraz to działa z „kliknięciem” jako zdarzeniem. Jak do licha (bez korzystania z alpha jQuery Mobile) mogę to osiągnąć dzięki zdarzeniu dotykowemu?

Jakieś pomysły?

Dzięki za wszelką pomoc.

javascript  jquery  events  click  touch 
— woskowy
źródło
Znalazłem to dla tych, którzy potrzebują pomocy w tym: - stackoverflow.com/questions/3183872/… Działa również na touchstart.
— woskowy

Odpowiedzi:

180

Trochę późno, ale musisz uzyskać dostęp do oryginalnego zdarzenia, a nie do masowanego przez jQuery. Ponieważ są to zdarzenia wielodotykowe, należy wprowadzić inne zmiany:

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

Jeśli chcesz inne palce, możesz je znaleźć w innych indeksach listy dotknięć.

AKTUALIZACJA DLA NOWEGO JQUERY:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});
— mkoistinen
źródło
Na końcu brakuje nawiasów kończących, powinno to być:})
— SteveLacy
Masz rację. Zaskoczony nikt nie zauważył od 2 lat! =) Dzięki!
— mkoistinen
Niestety nie zadziałało dla mnie, skończyło się na tym, że musiałem uzyskać x i y na pierwszym touchmove.
— andrewb
@andrewb, dodać e.preventDefault()w touchstartobsługi zdarzeń.
— matewka
Dzięki stary. Dobrze e.touches[0].pageX;mi się
— udało
43

Używam tej prostej funkcji dla projektu opartego na 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;
    };

przykład:

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

mam nadzieję, że będzie to dla Ciebie przydatne;)

— Nedudi
źródło
13
Nie ma potrzeby sprawdzania typu zdarzenia, ponieważ e.pageX będzie niezdefiniowany dla zdarzeń dotykowych. Po prostu zróbout.x = e.pageX || e.originalEvent.touches[0].pageX;
— Griffin
1
Przed powrotem dodaję tę część, aby uzyskać procentową lokalizację na podstawie elementu nadrzędnego na wypadek, gdyby komukolwiek to pomogło ... 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; wrócić;
— sradforth
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?
— gil9red
@Griffin - myślę, że problem z twoją sugestią polega na tym, że na pulpicie, gdy myszka znajduje się na lewej krawędzi dokumentu, pierwsza gałąź twojego oświadczenia da 0, co jest interpretowane jako fałszywe, a następnie błędy przeglądarki, ponieważ dotyka jest niezdefiniowana w drugiej gałęzi. Zgodzić się?
— MSC
13

Wypróbowałem tutaj kilka innych odpowiedzi, ale originalEvent również było niezdefiniowane. Po inspekcji znalazłem sklasyfikowaną właściwość TouchList (zgodnie z sugestią innego plakatu) i udało mi się dotrzeć do strony X / Y w ten sposób:

var x = e.changedTouches[0].pageX;
— matt.chatterley
źródło
4
działa to dobrze dla wszystkich kodów opartych na javascript. Screw jquery
— Martian2049
2
Mój wybawca! Działa doskonale nawet w przypadku touchmove ().
— Tibix
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.