Bagaimana saya bisa memicu klik acara JavaScript


216

Saya memiliki hyperlink di halaman saya. Saya mencoba mengotomatiskan sejumlah klik pada hyperlink untuk tujuan pengujian. Apakah ada cara Anda dapat mensimulasikan 50 klik pada hyperlink menggunakan JavaScript?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

Saya mencari pemicu acara onClick dari JavaScript.

Jawaban:


285

Melakukan satu klik pada elemen HTML: Cukup lakukan element.click(). Sebagian besar browser utama mendukung ini .


Untuk mengulangi klik lebih dari sekali: Tambahkan ID ke elemen untuk memilihnya secara unik:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

dan panggil .click()metode dalam kode JavaScript Anda melalui for for:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

1
NB ini untuk tujuan pengujian cepat. Untuk solusi cross-browser yang lebih kuat, patuh-standar, lihat jawaban Juan.
instanceof

3
Saya tidak mengerti loop dan ini tidak berfungsi di ponsel.
im_benton

@im_benton: Pengulangan itu untuk kebutuhan spesifik OP. Jika Anda hanya perlu memicu acara klik, Anda dapat menghilangkan baris yang dimulai dengan for(.
rinogo

87

MEMPERBARUI

Ini adalah jawaban lama. Saat ini Anda hanya perlu menggunakan klik . Untuk penembakan acara yang lebih lanjut, gunakan dispatchEvent .

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Jawaban Asli

Inilah yang saya gunakan: http://jsfiddle.net/mendesjuan/rHMCy/4/

Diperbarui untuk bekerja dengan IE9 +

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Perhatikan bahwa panggilan fireEvent(inputField, 'change');tidak berarti itu benar-benar akan mengubah bidang input. Kasus penggunaan yang umum untuk memecat acara perubahan adalah ketika Anda menetapkan bidang secara terprogram dan Anda ingin penangan acara dipanggil karena panggilan input.value="Something"tidak akan memicu acara perubahan.


Hai Juan! Contoh Anda tidak mendefinisikan JSUtil.NodeTypes.DOCUMENT_NODE
Kato

Saya tahu bahwa pertanyaannya adalah tentang mengklik acara tetapi Anda memberikan beberapa kode umum di sini dan apa yang saya lihat perubahan acara tidak akan dipecat (saya mengujinya dan ini tidak benar-benar berfungsi untuk acara semacam itu). Untuk memicu perubahan acara saya harus menggunakan fungsi pemicu jquery.
Aleksander Lech

@AlexanderLech Hanya memecat suatu acara tidak menjamin bahwa tindakan akan terjadi. Itu untuk klik, itu tidak untuk perubahan. Kasus penggunaan untuk peristiwa di mana perubahan tidak berfungsi adalah ketika Anda ingin membuat perubahan nilainya, tetapi Anda ingin semua penangan acara perubahan dipanggil (apakah itu diatur dengan jQueryatau tidak). Saya dapat memberikan bantuan yang lebih bermakna jika Anda mengajukan pertanyaan baru dengan kode persis yang Anda coba tetapi tidak berfungsi.
Juan Mendes

Terima kasih atas tanggapan yang cepat. Saya dapat menjalankan perubahan acara setelah beberapa modifikasi pada cuplikan Anda: 1) var node = document.getElementById (originalEvent.srcElement.id); 2) event.initEvent (eventName, true, true); // Saya tidak tahu mengapa Anda menonaktifkan bubbling untuk acara perubahan. Tolong beri tahu saya apa yang Anda pikirkan.
Aleksander Lech

40

Apa

 l.onclick();

Apakah persis memanggil onclickfungsi l, yaitu, jika Anda telah menetapkan satu l.onclick = myFunction;. Jika Anda belum menyetel l.onclick, itu tidak melakukan apa-apa. Sebaliknya,

 l.click();

mensimulasikan klik dan menembakkan semua penangan acara, apakah ditambahkan dengan l.addEventHandler('click', myFunction);, dalam HTML, atau dengan cara lain apa pun.


1
FWIW ini hanya berfungsi pada level elemen. Jika Anda menambahkan acara klik ke windowobjek, itu tidak akan secara ajaib mengekspos window.clickfungsi.
James Donnelly

20

Saya cukup malu bahwa ada banyak penerapan parsial yang salah atau tidak diungkapkan.

Cara termudah untuk melakukan ini adalah melalui Chrome atau Opera (contoh saya akan menggunakan Chrome) menggunakan Konsol. Masukkan kode berikut ke konsol (umumnya dalam 1 baris):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Ini akan menghasilkan hasil yang diperlukan


12

.click()tidak bekerja dengan Android (lihat dokumen mozilla , di bagian seluler). Anda dapat memicu acara klik dengan metode ini:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

Dari pos ini


1
Saya mencoba klik pemicu jQuery tetapi ternyata akhirnya memanggil panggilan balik daripada mengirim peristiwa aktual pada DOM. @manolo metode Anda sudah benar.
Akshay Gundewar

" .click()Tidak bekerja dengan Android" Sebenarnya, tabel terbaru mengatakan "Kompatibilitas tidak diketahui".
Gaurang Tandon

8

Gunakan kerangka kerja pengujian

Ini mungkin membantu - http://seleniumhq.org/ - Selenium adalah sistem pengujian otomatis aplikasi web.

Anda dapat membuat tes menggunakan plugin Firefox Selenium IDE

Penembakan acara secara manual

Untuk mem-api acara secara manual dengan cara yang benar, Anda perlu menggunakan metode yang berbeda untuk browser yang berbeda - baik el.dispatchEventatau di el.fireEventmana elakan menjadi elemen Anchor Anda. Saya percaya kedua hal ini akan membutuhkan pembangunan objek Acara untuk dilewati.

Alternatifnya, tidak sepenuhnya benar, cara cepat dan kotor adalah sebagai berikut:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.


1

Peringatan yang adil:

element.onclick()tidak berperilaku seperti yang diharapkan. Itu hanya menjalankan kode di dalamnya onclick="" attribute, tetapi tidak memicu perilaku default.

Saya memiliki masalah serupa dengan tombol radio yang tidak disetel untuk diperiksa, meskipun onclickfungsi khusus berjalan dengan baik. Harus menambahkan radio.checked = "true";untuk mengaturnya. Mungkin hal yang sama berlaku dan untuk elemen lain (setelah a.onclick()itu harus ada juga window.location.href = "url";)


Memang, menggunakan onclick()berarti eventobjek tidak akan secara otomatis ditentukan oleh browser, jadi metode umum seperti event.stopPropagation()juga akan tidak terdefinisi.
Boaz

0

Silakan hubungi fungsi pemicu di mana saja dan tombol akan mengklik.


<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}
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.