Bagaimana cara mensimulasikan klik dengan JavaScript?

291

Saya hanya ingin tahu bagaimana saya bisa menggunakan JavaScript untuk mensimulasikan klik pada suatu elemen.

Saat ini saya punya:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

Tapi itu tidak berhasil :(

Ada ide?

Ikan Belgin
sumber
9
"Lima Kesalahan Pengkodean Paling Umum": javascript.about.com/od/hintsandtips/a/worst_4.htm - Hampir tidak ada yang menjalankan IE4 lagi dan karenanya dukungan untuk dokumen. Semua DOM tidak lagi diperlukan. Sangat mengejutkan meskipun berapa banyak orang masih menggunakannya dalam pengkodean mereka. Lebih buruk lagi adalah dukungan untuk dokumen. Semua DOM sering diuji untuk menentukan browser yang digunakan dan jika didukung maka kode menganggap bahwa browser adalah Internet Explorer (yang sepenuhnya salah penggunaan karena Opera juga mengakui DOM itu) .
zaf

Jawaban:

418

Inilah yang saya masak. Ini cukup sederhana, tetapi berhasil:

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

Pemakaian:

eventFire(document.getElementById('mytest1'), 'click');
KooiInc
sumber
12
@Anderson Green: Saya telah menambahkan contoh pada jsfiddle ini: jsfiddle.net/KooiInc/W4BHD
KooiInc
4
Bukti bahwa ini berfungsi (dalam Chromium): +1 dengan document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
PointedEars
58
Yah saya mencoba java-script Anda pada tombol pilih :) (bekerja tentu saja)
0fnt
1
Untuk mensimulasikan perilaku pengguna yang sebenarnya, Anda harus membungkus dispatchEventatau clickdoa dengan setTimeout, seperti yang muncul bahwa dispatchEventadalah sinkron .
Lev Kazakov
16
Event.initEventsekarang sudah ditinggalkan developer.mozilla.org/en/docs/Web/API/Event/initEvent
artnikpro
392

Bagaimana dengan sesuatu yang sederhana seperti:

document.getElementById('elementID').click();

Didukung bahkan oleh IE.

Darren Sweeney
sumber
@HermannIngjaldsson Ya itu bekerja dengan baik di IE - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
Darren Sweeney
6
Pertanyaannya adalah "apakah itu bekerja dengan baik yaitu?" - jawabannya adalah ya - AFAIK setidaknya turun ke 8, belum memeriksa 7
Darren Sweeney
24
Apakah ini tidak ada sebelumnya? Mengapa jawaban 2010 tidak menyebutkan solusi sederhana ini? Hanya ingin tahu ...
Parth
3
@ NinoŠkopac Saat ini bekerja sangat baik untuk desktop tetapi tidak ada jaminan untuk bekerja dengan browser seluler. Bahkan situs pengembang mozilla tidak menunjukkan dukungan seluler.
le0diaz
8
@Parth Mungkin itu terjadi, itu hanya tidak mengklik untuk mereka.
Andrew
78

Sudahkah Anda mempertimbangkan untuk menggunakan jQuery untuk menghindari semua deteksi browser? Dengan jQuery, itu akan sesederhana:

$("#mytest1").click();
BradBrening
sumber
21
Ini hanya menjalankan penangan acara jQuery, bukan perilaku default (peramban berjalan ke href dalam kasus itu)
Romuald Brunet
12
Saya tidak tahu tentang sedih tetapi tentu bisa nyaman untuk tidak harus terus melakukan pengodean ulang rutinitas deteksi browser yang sama berulang kali.
BradBrening
9
@ErikAigner: Saya ingin tahu hal yang sama, tetapi senang bahwa jawaban yang diterima dalam kasus ini adalah JavaScript biasa dan bukan jQuery. Terlihat itu terlalu sering pada SO. Sekali lagi: jQuery adalah JavaScript, tetapi JavaScript bukan jQuery. Meskipun saya suka menggunakan jQuery, saya melihat semakin banyak devs yang tidak mengerti hal yang sebenarnya. 2 sen saya, tidak bisa menolak berkomentar. ;)
Sander
58
Ada juga banyak manusia yang tidak tahu harus mulai dari mana jika mereka harus mencuci pakaian dengan tangan, karena sebagian besar rumah tangga memiliki mesin cuci, dan hampir semua memiliki pengering pakaian. jQuery, seperti halnya peralatan modern, telah membuat tugas lama jauh lebih mudah dan lebih sedikit kesalahan. Ini bukan solusi untuk semua orang, namun, menurunkan pilihan jawaban yang secara akurat menjawab pertanyaan menggunakan sintaksis yang lebih ringkas dan dapat dimengerti sambil menjadi cross-browser yang kompatibel tampaknya mundur. +1.
FreeAsInBeer
2
@FreeAsInBeer Maka Anda juga tidak boleh berjalan di mana pun karena mengemudi jauh lebih mudah. Tapi kita tahu itu konyol. Anda berjalan jika Anda tidak perlu pergi jauh. Anda menggunakan JavaScript biasa jika Anda perlu melakukan sesuatu yang sederhana dan tidak ingin memuat seluruh perpustakaan untuk melakukannya. Tidak perlu membuang gas / bandwidth untuk sesuatu yang sederhana.
Jacob Alvarez
18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

Referensi

mnishiguchi
sumber
Saya percaya ini harus menjadi jawaban terbaik saat ini
DavidTaubmann
15

Anda bisa menghemat banyak ruang dengan menggunakan jQuery. Anda hanya perlu menggunakan:

$('#myElement').trigger("click")
Adam Salma
sumber
10
OP meminta JavaScript. Meskipun ini ringkas dan fungsional, beberapa orang lebih suka JS tanpa-perpustakaan daripada hal-hal seperti jQuery.
Karkas
43
Hemat ruang dengan mengunduh jquery?
MH
9
Beberapa orang juga lebih suka berkumpul.
Dan Nissenbaum
@ MH Saya pikir argumen yang lebih valid adalah "untuk membuatnya tetap sederhana". Profil default Anda di sini di SO adalah tentang ukuran jQuery yang sama.
adelriosantiago
7

Jawaban teratas adalah yang terbaik! Namun, itu tidak memicu peristiwa mouse untuk saya di Firefox saat itu etype = 'click'.

Jadi, saya mengubah document.createEventke 'MouseEvents'dan tetap masalah. Kode tambahan adalah untuk menguji apakah ada sedikit kode yang mengganggu acara, dan jika dibatalkan, saya akan mencatatnya di konsol.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}
brianlmerritt
sumber