EMİRHAN PERVANLAR

Merhabalar , jquery kullanarak hedef dışı tıklama nasıl yaparız bu içeriğimizde bundan bahsedeceğim. Direk keyword aratarak gelmeyen ve meraktan konuya göz atan arkadaşlarımız neden böyle bir şeye ihtiyaç duyayım tarzında bir fikre kapılabilirler çok uzatmadan senaryomuzu sunalım.  

Not: Tüm kodlar sayfanın altında yer alıyor. Anlatımı pas geçip kodlara göz atabilirsiniz ;)

Senaryo :

Sitemiz içerisinde alert(uyarı) mesajları , popup'lar vb. gibi açılır kapanır tek kullanımlık kısımlar oluşturmak istediğimizde bu kısımları açması biraz css bilgisiyle oldukça kolaydır. Fakat iş bu kısımları kapatmaya geldiğinde işi biraz daha profesyonel hale getirmek için jquery kullanarak hedef dışı tıklamaları yakalayarak bizim oluşturduğumuz uyarı kısmının dışına tıklandığını saptayıp bu kısmı kapatacağız.

Senaryomuzu alternatif pek çok fikre dönüştürmeniz pek mümkün çünkü bu kod birçok yerde işinize yaracaktır. Biz şimdilik bu senaryo üzerinden kodlamamıza gecelim.

Kod ve İnceleme :

Jquery kodlarımıza hemen açılış komutlarımızdan biri olan document.ready ile başlıyoruz.

$(document).ready(function(){ ... })

Document.ready'mizin içerisini doldurmaya başlayalım. Az buçuk CSS bilgisi olan arkadaşların aşina olduğu küçük bir tüyo ile devam edeceğiz. Nedir bu tüyo ?

Şimdi öncelikle senaryomuza baktığımızda bizim önce site içerisinde bir tıklama eylemi yakalamamız gerekiyor. Bu tıklama eylemini öyle alel ade bir yerden alamayacağımız aşikar. Bu yüzden sayfamızda ki bütün html kodlarını kapsayan yani içine alan bir bölüme sahip olmamız gerekiyor. İşte tüyomuz burada devreye giriyor. CSS bizim böyle bir ihtiyaca düşeceğimizi tahmin edecek olmalı ki " * " ifadesini ortaya çıkarmış. Bu komut bir çok yerden tanıdık gelebilir örneğin SQL komutlarında da " * " ifadesi herşey anlamına gelmektedir.

Konumuz dağılmadan geri dönelim. " * " ifadesini kullanarak bir " click event " oluşturacağız. Yani bu " * " tıklandığında benim kodlarım devreye girecek.

$("*").click(function(event){ ... }

Bu tıklama eventini gerçekleştiğinde senaryoma bağlı kalarak benim uyarı mesajlarını göstereceğim kısma mı tıklandığını bulmam gerekiyor. Burada dikkatinizi fonksiyonumun içerisinde yer alan parametreye yani " event " e vermeniz gerekiyor. Bu parametre üzerinden tıklanılan kısmın neresi olduğunu veya neresi olmadığını bulacağız. Bunu da " event.target " komutuyla ve " .is " ile sağlayacağız.

if(!$(event.target).is("#pencere")){

             alert("pencere dışı ");

}

Burada senaryoma bağlı kalarak tıklama eyleminin benim pencereme mi yoksa dışına mı yapıldığını saptıyoruz. Komut içerisinde yer alan " .is " ifadesi bu hedef bu mu anlamı taşımaktadır ve " true , false " döndermektedir. Benim istediğim işlem pencere dışı tıklamaları yakalamak olduğu için dönen ifadenin tersini " ! " alarak kodlamamızı bitiriyoruz.

Not : " #pencere " kısmını bilmeyen arkadaşlar için açıklıyım CSS'te " # " id , " . " class anlamına gelmektedir. Burada ID'si " pencere " olan html koduna işlem yapıyoruz. Örneğin

<div id="pencere"></div>

Tüm Kodlar :

$(document).ready(function(){
              $("*").click(function(event){
                         if(!$(event.target).is("#pencere")){
                                      alert("pencere dışı ");
                           }
                })
}) ;

Github Linki :

https://github.com/emirhanpervanlar/jquery-hedef-disi-tiklama