Click olayı için olduğu gibi 'touchstart' olayı için e.PageX konumuna bir eşdeğer var mı?


104

Canlı işlevle kullanılan bir touchstart olayının jQuery ile X konumunu almaya çalışıyorum?

Yani

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

Şimdi, bu olay olarak 'tıklama' ile çalışır. Nasıl olur da ( alpha jQuery Mobile'ı kullanmadan) bir dokunma olayı ile alabilirim?

Herhangi bir fikir?

Herhangi bir yardım için teşekkürler.


Bu konuda yardıma ihtiyaç duyanlar için bunu buldum: - stackoverflow.com/questions/3183872/… Aynı zamanda touchstart üzerinde de çalışıyor.
balmumu

Yanıtlar:


180

Biraz geç, ancak jQuery masajına değil, orijinal etkinliğe erişmeniz gerekiyor. Ayrıca, bunlar çoklu dokunma etkinlikleri olduğundan, başka değişikliklerin yapılması gerekir:

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

Başka parmaklar istiyorsanız, onları dokunma listesinin diğer indekslerinde bulabilirsiniz.

YENİ JQUERY İÇİN GÜNCELLEME:

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

Sonunda eksik bir bitiş paranteziniz var, şöyle olmalıdır:})
SteveLacy

Haklısın. 2 yıldır kimsenin fark etmemesine şaşırdım! =) Teşekkürler!
mkoistinen

Ne yazık ki benim için işe yaramadı, ilk önce x ve y'yi almak zorunda kaldım touchmove.
andrewb

@andrewb eklemek e.preventDefault()içinde touchstartolay işleyicisi.
matewka

Sağol kanka. e.touches[0].pageX;Benim için iyi çalıştı
Jayant Varshney

43

Bu basit işlevi JQuery tabanlı proje için kullanıyorum

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

misal:

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

umarım bu sizin için yararlı olur;)


13
Olay türünü kontrol etmeye gerek yoktur çünkü e.pageX dokunma olayları için tanımsız olacaktır. Sadece yapout.x = e.pageX || e.originalEvent.touches[0].pageX;
Griffin

1
Geri dönmeden önce, herhangi birine yardımcı olması durumunda üst öğeye dayalı yüzde konumunu elde etmek için bu kısmı ekliyorum ... 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; geri dönün;
sradforth

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

@Griffin - Sanırım önerinizle ilgili sorun, masaüstünde, fare belgenin sol kenarındayken, ifadenizin ilk dalının yanlış olarak yorumlanan 0 vermesi ve ardından dokunma nedeniyle tarayıcı hatalarının olması. ikinci dalda tanımsızdır. Katılıyorum?
MSC

13

Diğer cevaplardan bazılarını burada denedim, ancak originalEvent de tanımsızdı. İncelemenin ardından, TouchList sınıflandırılmış bir mülk buldu (başka bir poster tarafından önerildiği gibi) ve şu şekilde X / Y sayfasına ulaşmayı başardı:

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

4
bu, tüm javascript tabanlı kodlar için iyi çalışıyor. screw jquery
Martian2049

2
Benim kurtarıcım! Touchmove () için bile mükemmel çalışır.
Tibix


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.