Javascript: Membuat Simulasi Mouse Click Element HTML

Snippet JavaScript ini adalah untuk melakukan simulasi klik element HTML. Penggunaannya bisa dilakukan di browser console. Untuk klik element dengan action sederhana seperti anchor link atau button, bisa menggunakan element.click();. Namun ketika element yang diklik melakukan action berdasarkan event click yang dibaca oleh jquery/ajax, penggunaan metode element.click(); mungkin tidak memberikan action klik yang dimaksud. Untuk itu digunakanlah function berikut:

Script dasar: (Sumber: Stackoverflow)

var dispatchMouseEvent = function(target, var_args) {
 var e = document.createEvent("MouseEvents");
 // If you need clientX, clientY, etc., you can call
 // initMouseEvent instead of initEvent
 e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
 target.dispatchEvent(e);
};
dispatchMouseEvent(element, 'mouseover', true, true);
dispatchMouseEvent(element, 'mousedown', true, true);
dispatchMouseEvent(element, 'click', true, true);
dispatchMouseEvent(element, 'mouseup', true, true);

Penggunaannya script ini secara nyata yang saya praktekkan adalah untuk mengklik 50 tombol toggle on/off dalam satu halaman web dimana disitu tidak disediakan menu Toggle All, jadi harus meng-klik satu persatu semua tombolnya. Kalau cuma 50 tombol saja (hanya 1 page) saya bisa meng-klik satu persatu secara manual. Tetapi karena ada 10 page, jadi ada total 450 lebih item yang harus diklik, saya buat script otomatisnya. Saya adalah orang yang sangat malas untuk melakukan sesuatu secara manual yang berulang-ulang :D. Berikut adalah modifikasi script dasar untuk menjalankan otomatisasi klik tombol tadi:

var dispatchMouseEvent = function(target, var_args) {
 var e = document.createEvent("MouseEvents");
 // If you need clientX, clientY, etc., you can call
 // initMouseEvent instead of initEvent
 e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
 target.dispatchEvent(e);
};

//mengambil element yang akan diklik otomatis
//karena element lebih dari satu dan classnya sama, saya menggunakan getElementsByClassName
var a = document.getElementsByClassName('gwt-Image arc-toggle-button-cursor');

//looping semua element hasil dari getElementsByClassName
for(var i = 0; i < a.length; i++) {
 var element = a[i];
 dispatchMouseEvent(element, 'mouseover', true, true);
 dispatchMouseEvent(element, 'mousedown', true, true);
 dispatchMouseEvent(element, 'click', true, true);
 dispatchMouseEvent(element, 'mouseup', true, true);
}

Script diatas dieksekusi di browser console. Untuk menampilkan browser console bisa dengan shortcut Ctrl+Shift+K di Firefox/Chrome.

Bila anda tidak faham dengan artikel ini, abaikan saja. Snippet ini saya tulis untuk catatan pribadi. Kalau anda suka utak-atik javascript di browser console, dan menyukai otomatisasi pekerjaan, mungkin artikel ini bermanfaat.

Sumber: http://stackoverflow.com/a/4176116/2110506

Referensi javascript:
http://www.w3schools.com/js/js_loop_for.asp
http://www.w3schools.com/js/js_htmldom_elements.asp
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
Javascript: Membuat Simulasi Mouse Click Element HTML Javascript: Membuat Simulasi Mouse Click Element HTML Reviewed by errorisme on May 28, 2016 Rating: 5

4 comments:

  1. Bro Ero bukan nih ?

    Wah lama tak jumpa mas bro :D

    ReplyDelete
  2. mas kok ndak pernah update lg?

    ReplyDelete

Powered by Blogger.