Bir buton haricindeki alanlara tıklamayı nasıl saptlarım?

Sayfadaki belli bir eleman dışında bir yere yapılan tıklama olayını saptamak!

Javascript dersleri’nin içinde bu konuya yer vermek istedim. Çünkü sıklıkla karşılaşılmasada ihtiyacınız olduğunda çok büyük önem taşıyan bir durum. Örnek bir olay ile konuyu açıklamaya çalışayım. Örneğin sayfanızda bir butona basılınca aşağı doğru açılan bir menü yaptınız. Bu kısma kadar sıklıkla uyguladığımız tıklama olayıyla gerekli elemanı görünür yapıyoruz.

Örnek Kod :
butonumuzun ID’si : “ornek_btn” olsun.
ve bu butona tıklayınca açılacak içerik/menü ID’side “ornek_icerik” olsun.

Yukarıdaki şekilde içerik alanımızı açtık. Fakat aynı zamanda dışarıda bi alana tıkladığımızda da bu alanın kapanmasını istiyoruz.

Bu komut yardımıyla da sayfada herhangi bir yere tıkladığımızda içeriğin kapanmasını sağladık.
Fakat burda şöyle bir durum oluşmakta. ornek_btn id’li butonumuzda html içerisinde olduğundan bu butona tıklandığında da html etiketi için yazdığımız javascript komutu da tetiklenecek. ve içerik açılıp kapanacaktır. (ÇALIŞAN ÖRNEK : http://jsfiddle.net/bilalyilmax/qb0ub1zv/ )

Burda yardımımıza koşan javascript fonksiyonu stopPropagation‘dır. Bu kod yardımıyla butona tıklandığında önceki tıklama olaylarını iptal ediyoruz.

Javascript kodumuzun son hali aşağıdaki gibi oluyor.

( Çalışan Örnek : http://jsfiddle.net/bilalyilmax/qb0ub1zv/4/ )

Buntonun tıklanma olayına eklediğimiz ufak bir kod sayesinde artık butona tıkladığımızda içeriğimiz kapanmıyor. Bu javascript dersi sayesinde önemli bir konuya daha değinmiş olduk.

 

Henüz hiç yorum yapılmamış,

İlk Yorumu Siz Yapın...


Bir Cevap Yazın

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

En Komik Tv Facebook Sayfası Yok Artık Facebook Sayfası