Cara Deteksi Klik di Luar Elemen dengan Javascript

Cara Deteksi Klik di Luar Elemen dengan Javascript - Hallo semuanya, pada kali ini saya akan berbagi trik tentang javascript, trik kali ini adalah membahas tentang deteksi klik di luar elemen utama pada javascript. Salah satu pola paling umum yang digunakan dalam JavaScript adalah mendeteksi klik di luar elemen. Kalian bisa menerapkannya untuk menutup komponen user interface non-modal seperti menu atau dropdown ketika user mengklik di luar elemen itu dan juga flyout, atau seperti popup highlight suatu elemen.

Ada berbagai solusi untuk masalah ini.

Solusi 1

Salah satunya adalah mengimplementasikan solusi JavaScript biasa (vanilla javascript).
Flyiut dalam HTML akan terlihat seperti ini:

<div class="flyout" id="flyout-example">
   <h5 class="flyout-title">This could be a flyout;</h5>
   <div class="flyout-debug" id="flyout-debug"></div>
   <div class="flyout-buttons">
      <button class="button button-outline" type="button">Cancel</button>
      <button class="button" type="button">Ok</button>
   </div>
</div>

Jadi, untuk mendeteksi klik di luar elemen, akan lebih baik jika kalian menambahkan listener ke seluruh elemen dokumen. Akibatnya, loop utama akan naik DOM dari elemen target yang diklik untuk mencari jika parent elemen itu milik wadah flyout.

Berikut adalah kode javascript umum yang bisa kalian gunakan.

document.addEventListener("click", function (evt) {
    var flyoutEl = document.getElementById('flyout-example'),
        targetEl = evt.target;

    do {
        if (targetEl == flyoutEl) {
            document.getElementById("flyout-debug").textContent = "Clicked inside!";
            return;
        }
        targetEl = targetEl.parentNode;
    } while (targetEl);

    document.getElementById("flyout-debug").textContent = "Clicked outside!";
});

Atau jika kalian ingin menggunakan javascript ES6 bisa lihat kode dibawah ini

document.addEventListener("click", (evt) => {
    const flyoutEl = document.getElementById("flyout-example");
    let targetEl = evt.target;

    do {
        if (targetEl == flyoutEl) {
            document.getElementById("flyout-debug").textContent = "Clicked inside!";
            return;
        }
        targetEl = targetEl.parentNode;
    } while (targetEl);

    document.getElementById("flyout-debug").textContent = "Clicked outside!";
});

Dengan kode ES6 maka browser yang kalian gunakan harus versi terbaru ya.

Solusi 2

Menggunakan JQuery, pada konsep sederhananya kita memberikan event click ke seluruh elemen dengan menggunakan selector window untuk memanipulasi suatu konten

contoh:

$(window).click(function () { //sembunyikan menu jika dalam posisi muncul }); 
$('#menucontainer').click(function (event) {event.stopPropagation();});

Baiklah, demikian artikel kali ini yang membahas tentang bagaimana cara deteksi klik diluar elemen dengan menggunakan javascript. semoga bermanfaat, sampai jumpa