Javascript'te bir elemanın dışına tıklanıldığını tesipt etme.

Merhabalar bu yazımda sizlere Javascript Programala dilinde belirlediğimiz bir elemanın dışına tıklandılığını nasıl anlarız ondan bahsedeceğim.

Öncelikle Popup gibi bir uygulama yapıyorsanız , ekranda popupu kapatacak bir "X" ikonunuz olabilir , ancak kişi bununla uğraşmasın ve popup'un dışında bir alana tıklarsa popup kapatılsın isteyebilirsiniz. E tabii bunun için de popup alanının dışına tıklanıldığını tespit etmeniz gerekiyor.

Bunun için aşağıdaki kodu inceleyelim.

// Dokümanımızın click eventini kullanıyoruz.
document.addEventListener("click", (e) => {
    const hedefAlan= document.querySelector(".hedefAlan");
    // Burada 'target' özelliği sayesinde tıklanılan alanın dom özelliklerine erişiyoruz.
    let tiklanilan = e.target;

    do {
        if (tiklanilan == hedefAlan) {
          // Eğer tıklanılan alan ile hedef alanımız eşler ise return ile fonksiyondan çıkıyoruz.
            return;
        }
        // Parent node ile döngü döndükçe üst  düğümlere bakıyoruz (Alt düğümlerimizden birisi ise yukarı çıkarak bizim hedef elemanı  bulacak).
        // Eşleşme olmaz ise bir sonraki düğüme bu kod sayesinde erişiyoruz.
        tiklanilan = tiklanilan.parentNode;
    } while (tiklanilan);

    // Eğer hiçbirini bulamaz ise return edemeyecek ve  burası devreye girecek
    console.log("Başka bir alana tıklanıldı");
});

İşlemler bu kadar basit aslında mantığını kavradığınızda ufkunuz açılmaya başlayacak, burada önemli husus kopyala yapıştır ile yürümemeniz . Kullanılan anahtar kelimeleri dikkate alıp araştırma yapmanız sizin faydanıza olacaktır örneğin: "parentNode nedir ?" deyip öğrenin ve ardından zincirin parçalarını oluşturun.

İyi kodlamalar..