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.