Apakah ada posisi e.PageX yang setara untuk acara 'touchstart' seperti untuk acara klik?

104

Saya mencoba untuk mendapatkan posisi X dengan jQuery dari acara touchstart, digunakan dengan fungsi langsung?

Yaitu

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

Sekarang, ini berfungsi dengan 'klik' sebagai acara. Bagaimana caranya (tanpa menggunakan alpha jQuery Mobile) saya mendapatkannya dengan acara sentuh?

Ada ide?

Terima kasih atas bantuannya.

javascript  jquery  events  click  touch 
— lilin
sumber
Saya menemukan ini untuk mereka yang membutuhkan bantuan dalam hal ini: - stackoverflow.com/questions/3183872/… Ini juga berfungsi pada touchstart.
— lilin

Jawaban:

180

Agak terlambat, tetapi Anda perlu mengakses acara asli, bukan yang dipijat jQuery. Selain itu, karena ini adalah acara multi-sentuh, perubahan lain perlu dilakukan:

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

Jika Anda ingin jari lain, Anda dapat menemukannya di indeks daftar sentuh lainnya.

UPDATE UNTUK JQUERY BARU:

$(document).on('touchstart', '#box', function(e) {
  var xPos = e.originalEvent.touches[0].pageX;
});
— mkoistinen
sumber
Anda memiliki tanda kurung akhir yang hilang di bagian akhir, seharusnya:})
— SteveLacy
Kamu benar. Terkejut tidak ada yang memperhatikan selama 2 tahun! =) Terima kasih!
— mkoistinen
Sayangnya tidak berhasil untuk saya, saya akhirnya harus mendapatkan x dan y pada awalnya touchmove.
— andrewb
@andrewb, tambahkan e.preventDefault()dalam touchstartevent handler.
— matewka
Terimakasih kawan. e.touches[0].pageX;Bekerja dengan baik untuk saya
— Jayant Varshney
43

Saya menggunakan fungsi sederhana ini untuk proyek berbasis 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;
    };

contoh:

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

semoga bermanfaat bagi Anda;)

— Nedudi
sumber
13
Tidak perlu memeriksa jenis acara karena e.pageX tidak akan ditentukan untuk acara sentuh. Lakukan sajaout.x = e.pageX || e.originalEvent.touches[0].pageX;
— Griffin
1
Sebelum kembali, saya menambahkan bagian ini untuk mendapatkan lokasi persentase berdasarkan elemen induk jika itu membantu siapa pun ... 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; kembali keluar;
— sradforth
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){-> if (e.type.startsWith("touch"))?
— gil9red
@ Griffin - Saya pikir masalah dengan saran Anda adalah bahwa di desktop, ketika mouse berada di tepi kiri dokumen, cabang pertama dari pernyataan Anda akan menghasilkan 0, yang ditafsirkan sebagai salah, dan kemudian kesalahan browser karena sentuhan tidak ditentukan di cabang kedua. Setuju?
— MSC
13

Saya mencoba beberapa jawaban lain di sini, tetapi originalEvent juga tidak ditentukan. Setelah diperiksa, temukan properti yang diklasifikasikan ke TouchList (seperti yang disarankan oleh poster lain) dan berhasil membuka halamanX / Y dengan cara ini:

var x = e.changedTouches[0].pageX;
— matt.chatterley
sumber
4
ini berfungsi dengan baik untuk semua kode berbasis javascript. screw jquery
— Martian2049
2
Penyelamat saya! Bekerja dengan sempurna bahkan untuk touchmove ().
— Tibix
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.