Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

jQuery İle Hedef Dışı Tıklama Olayı Yaratalım

Bu yazımızda, oluşturduğumuz web sitelerinde genellikle bilgi, reklam ve benzer amaçlarla açılan pencere, lightbox ve modal alanlarının kapatılması için kullandığımız bir olaydan bahsedeceğiz.İlgili alanı hedef alan olarak nitelendirirsek eğer bu alan dışındaki tıklanma işlemleri gerçekleştirildiğinde ilgili pencereyi kapatmak için bu yöntemi kullanmaktayız.Tabi ki de türlü türlü amaçlar içinde sizler bu tekniği genelleyebilirsiniz.

Şimdi örnek olarak aşağıdaki html yapısını ele alalım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        #Pencere {
            width: 250px;
            height: 250px;
            background: #933;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Başlıksız Belge</title>
</head>
<body>
    <div id="Pencere"></div>
</body>
</html>

Burada id değeri “Pencere” olan div elemanı dışında tıklanma işlemi gerçekleştiği zaman bu durumu nasıl yakalayabileceğimize göz atalım.

    <script type="text/javascript">
        $(document).ready(function () {
            $("*").click(function (event) {
                if (!$(event.target).is("#Pencere")) {
                    alert("Pencere dışına tıklandı.");
                    return false;
                } else {
                    alert("Pencere içine tıklandı.");
                    return false;
                }
            });
        });
    </script>

Yukarıdaki event sayesinde sayfanın tıklandığı kaynağı elde edebiliyor ve kontrol edebiliyoruz.

İyi çalışmalar dilerim…

Kaynak : http://bilgisayaci.org/jquery-hedef-disi-tiklama/

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Yıldırım Türker dedi ki:

    Google’a yazıp 2-3 siteye girdikten sonra direk sizde bulabildim elinize sağlık

  2. Kamil Yasin Ablay dedi ki:

    Teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir