Bagaimana cara mensimulasikan klik dengan menggunakan koordinat x, y di JavaScript?

93

Apakah mungkin menggunakan koordinat yang diberikan untuk mensimulasikan klik di JavaScript di dalam halaman web?

RadiantHex
sumber
2
Apa tujuanmu? :) Apakah Anda mencoba untuk mensimulasikan klik pada gambar peta misalnya?
Nick Craver

Jawaban:

147

Anda dapat mengirimkan klik peristiwa , meskipun ini tidak sama dengan klik sebenarnya. Misalnya, ini tidak dapat digunakan untuk mengelabui dokumen iframe lintas domain agar mengira telah diklik.

Semua browser modern mendukung document.elementFromPointdan HTMLElement.prototype.click(), setidaknya sejak IE 6, Firefox 5, versi Chrome apa pun dan mungkin versi Safari apa pun yang mungkin Anda pedulikan. Ia bahkan akan mengikuti tautan dan mengirimkan formulir:

document.elementFromPoint(x, y).click();

https://developer.mozilla.org/En/DOM:document.elementFromPoint https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Andy E
sumber
1
@RadiantHex: ya, sebenarnya IE adalah yang pertama menerapkannya dan itu berjalan kembali ke IE6. Implementasi Chrome, Firefox dan Safari 5 baik-baik saja tetapi Safari 4 dan Opera salah (meskipun bisa diterapkan). Lihat quirksmode.org/dom/w3c_cssom.html#documentview .
Andy E
1
Saya sangat senang dengan penemuan ini !! = D Membuat banyak hal yang dianggap tidak mungkin menjadi mungkin sekarang =) ... atau setidaknya kurang rumit. Terima kasih!!
RadiantHex
1
Ini tampaknya tidak berfungsi dengan acara $ .live (), adakah cara membuatnya berfungsi dengan acara yang dibuat dengan $ .live () juga?
ActionOwl
1
@AndyE Ini sekarang bekerja dalam kondisi berikut: Saya memiliki halaman web, saya memuat Iframe dari domain lain selain domain saya. Dan saya ingin mengklik di area iframe. Apakah Anda punya solusi terkait hal ini?
Parixit
2
@parixit: tidak, itu tidak mungkin. Anda dapat mensimulasikan klik pada iframe tetapi itu hanya akan menyebarkan dokumen yang berisi. Tidak ada dalam dokumen yang ada yang akan terpengaruh (untuk alasan keamanan yang sangat jelas).
Andy E
67

Ya, Anda dapat mensimulasikan klik mouse dengan membuat acara dan mengirimkannya:

function click(x,y){
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x,y);
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        x, y, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}

Berhati-hatilah dalam menggunakan clickmetode pada elemen - metode ini diterapkan secara luas tetapi tidak standar dan akan gagal di misalnya PhantomJS. Saya berasumsi bahwa implementasi jQuery .click()melakukan hal yang benar tetapi belum dikonfirmasi.

Victor Zamanian
sumber
Menyelamatkan saya dari kekacauan. Metode awal saya gagal tetapi yang ini datang untuk menyelamatkan, terima kasih.
iChux
3
plus1 karena tidak menggunakan jQuery. Bertentangan dengan jawaban yang diterima, yang satu ini menjawab pertanyaan itu.
tomekwi
1
Ini jauh lebih kuat daripada jQuery$.click()
Steven Lu
7
initMouseEventsudah tidak digunakan lagi: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
vikeri
3
Alih-alih usang initMouseEventAnda dapat menggunakan var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )Ini juga ditampilkan di stackoverflow.com/a/36144688/384670 .
M Katz
28

Ini hanyalah jawaban torazaburo , diperbarui untuk menggunakan objek MouseEvent.

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}
pengguna2067021
sumber
0

itu tidak berfungsi untuk saya tetapi mencetak elemen yang benar ke konsol

ini kodenya:

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);
    console.log(el); //print element to console
    el.dispatchEvent(ev);
}
click(400, 400);
VilgotanL
sumber
-2

Untuk alasan keamanan, Anda tidak dapat memindahkan penunjuk mouse dengan javascript, atau menyimulasikan klik dengannya.

Apa yang ingin Anda capai?

quantumSoup
sumber
@Aicule: terima kasih telah memberi tahu saya! Saya akan menambahkan sedikit info untuk pertanyaan itu. Saya hanya bereksperimen, tidak ada yang benar-benar produktif =)
RadiantHex
2
Di Chrome dan Safari, Anda dapat mengaktifkan klik pada posisi x, y tertentu. Beginilah cara kerja demo ini . Firefox adalah satu-satunya browser yang gagal, jadi mungkin itu adalah kebijakan keamanan khusus Firefox.
thdoan
Kebenaran terletak pada jawaban di bawah ini, createEvent()+initMouseEvent()
Valer
1
Dalam kasus saya, pengujian.
Jose Nobile
Anda pasti dapat menyimulasikan klik dengan koordinat X / Y tertentu, meskipun tidak akan berperilaku persis sama.
Agamemnus