jQuery Hedef Dışı Tıklama
Merhaba Arkadaşlar,
Bu makalede jQuery’nin belirtilen hedeflerin dışına tıklamada nasıl bir tetikleme işlemi yaptığını göreceğiz. Çoğunlukla sitenin herhangi bir noktasından açılan bilgi panelleri, lightbox ve modal alanlarının kapatılması için kullanılan bu özellik ile birlikte kullanıcıyı içeriği görüntüledikten sonra kapatmak için tek bir ikon veya yazı ile sınırlandırmamış oluyoruz.
Çalışma mantığını incelediğimizde site içerisinde yapılan her tıklamayı bir “event” olarak bize gönderiyor. Biz de gelen bu event’ın target değerine bakarak bu tıklamanın belirtilen alan dışında olup olmadığına bakıyoruz. Eğer belirtilen alanın içerisinde yapıldıysa herhangi bir işlem yapmıyor, eğer belirtilen alanın dışında yapıldıysa fonksiyonun içerisine girerek istediğimiz işlemleri yaptırıyoruz.
Yapacağımız örnekte bir kutu oluşturacağız ve tıklamanın bu kutu üzerinde olup olmadığını kontrol edeceğiz. Eğer kutu üzerinde tıklama işlemi yapıldıysa herhangi bir fonksiyon çalışmayıp kutu dışında yapılan tıklamalarda ekrana alert ile bir mesaj yazdıracağız. Uygulamamızı yapabilmek için bir sayfa oluşturalım ve kodlarımızın ilk halini şu şekilde oluşturalım:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - jQuery Hedef Dışı Tıklama</title>
<style type="text/css">
.box{width: 300px; height: 300px; background: red;}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
“.box” class değerine sahip olan bir kutumuz bulunuyor. Şimdi jquery ile her tıklama işlemini kontrol edelim. Yukarıda da belirttiğim gibi gelen event’ın target değerini kontrol ederek nereye tıklandığını kontrol ediyoruz. jQuery kod blogumuz şu şekilde olacaktır:
$(document).ready(function(){
$("*").click(function(event){
if (!$(event.target).is(".box")) {
alert("Kutu dışına tıklandı..");
return false;
}
});
});
Bu şekilde düzenlenen js kodlarının ardından sayfayı çalıştırdığımızda kırmızı kutu dışına yapılan her tıklamada “Kutu dışına tıklandı..” mesajını göreceğiz. Uygulamayı sonlandırmadan önce bir kaç bilgi vermek istiyorum.
– Hedef dışı tıklama yerine hedef içi tıklama istenirse “if (!$(event.target).is(“.box”)) {” satırında ki “!” işaretinin kaldırılması yeterli olacaktır. Bu işaret zıt seçimleri ifade eder.
– Makalenin başında anlatırken söylediğim paneller ve lightbox alanlarında sadece belirtilen alan dışında tıklama yeterli olmayacaktır. Örneğin bir lightbox’ı açtığımızda genellikle sağ üst tarafında bir kapatma ikonu da görebiliriz. Bu kapatma ikonunun class’ını “close” olarak düşünürsek “if (!$(event.target).is(“.box”)) {” satırını “if (!$(event.target).is(“.box”) && !$(event.target).is(“.box .close”)) {” olarak güncellediğimizde hedef dışı ve kapatma ikonuna denk gelmeyen alanlarda fonksiyonu çalıştırmış oluruz.
– Bu basit bir uygulama olduğu için ben sayfada yapılan her tıklamayı kontrol ettim. Ama bir çok sayfadan oluşan projelerde bu performans kaybına sebep olacaktır. Bu nedenle tıklama yapıldıktan sonra bir if döngüsü ile kontrol yaparak çalıştırırsanız daha iyi olacaktır. Örneğin bilgi paneli açıldığında “active” class’ı alıyorsa normalde şu şekilde kullanılan kodlar:
$(document).ready(function(){
$("*").click(function(event){
if (!$(event.target).is(".box")) {
alert("Kutu dışına tıklandı..");
return false;
}
});
});
şu şekilde değiştirilmelidir:
$(document).ready(function(){
$("*").click(function(event){
if ($(".box").hasClass("active") && !$(event.target).is(".box")) {
alert("Kutu dışına tıklandı..");
return false;
}
});
});
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 59 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar