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

8 comments:

  1. Bro Ero bukan nih ?

    Wah lama tak jumpa mas bro :D

    ReplyDelete
  2. mas kok ndak pernah update lg?

    ReplyDelete
  3. bikin aplikasi mobile blog lagi dong mass

    kayak yang dulu :D

    ReplyDelete
  4. iyo kui gawe aplisane maneh

    ReplyDelete
  5. Mas Kangen sama Mobile Blog nya..
    Tolong di kembangkan lagi..
    karena sangat mudah di gunakan..

    ReplyDelete
    Replies
    1. udah gak ada lagi tutorial buat eMobileBlog nya mmas,,
      kami rindu dengan hasil karya mu..
      aku user 2013 an wkwk
      2018 harus ada ya pokoknya hahaha

      Delete

Powered by Blogger.