CSS’de pointer-events özelliği, bir öğenin fare tıklamaları, hover durumları ve diğer işaretçi tabanlı olayların hedefi olup olamayacağını belirler. Kısacası, tarayıcının bir öğeyi işaretçi altındayken etkileşimli olarak değerlendirip değerlendirmeyeceğine karar vermenizi sağlar. Örneğin, pointer-events: none; atanmış bir öğe hiçbir tıklama veya hover olayı almaz ve altındaki öğe hedef haline gelir. Bu özellik özellikle SVG grafiklerinde ve karmaşık kullanıcı arayüzlerinde büyük kolaylık sağlar.
Bu özelliğin nasıl çalıştığını anlamak için tarayıcının işaretçi olayını nasıl ateşlediğini bilmek gerekir. Öncelikle tarayıcı, işaretçinin altında hangi öğenin olduğunu belirler. Bu işleme 'hit-testing' (isabet testi) denir. Normalde tarayıcı, işaretçi altındaki en üstteki öğeyi seçer. Ancak bu öğenin pointer-events değeri none ise tarayıcı onu atlar ve bir sonraki uygun öğeyi bulana kadar aramaya devam eder. Bu mekanizma sayesinde olayları devre dışı bırakmak yerine hangi öğenin olay hedefi olacağını değiştirmiş olursunuz.
pointer-events özelliğinin sözdizimi oldukça esnektir: auto, none ve SVG’ye özgü dokuz farklı değer. auto varsayılan değerdir ve öğe normal şekilde işaretçi olaylarını alır. none ise öğenin kendisini olayların hedefi olmaktan çıkarır, böylece altındaki öğe hedef olur. SVG için ek değerler arasında visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, bounding-box ve all bulunur. Bu değerler, SVG öğelerinin hangi kısımlarının (dolgu, çizgi, görünürlük vb.) işaretçi olaylarına yanıt vereceğini ince ayarla belirlemenize olanak tanır.
Önemli Gelişmeler
SVG’ye özgü değerlerin her biri farklı bir senaryoya hitap eder. Örneğin, visiblePainted değeri yalnızca öğe görünür olduğunda ve işaretçi boyalı bir alan üzerindeyse (dolgu veya çizgi none değilse) olayları kabul eder. visibleFill ise fill özelliğinden bağımsız olarak yalnızca dolgu alanını hedefler. Benzer şekilde visibleStroke yalnızca çizgi alanına odaklanır. bounding-box değeri ise öğenin şeklinden bağımsız olarak sınırlayıcı kutusunun tamamını olay alanı yapar. all değeri ise fill, stroke veya visibility değerlerinden bağımsız olarak hem dolgu hem çizgi alanlarını kapsar.
Dikkat edilmesi gereken önemli bir nokta, pointer-events özelliğinin kalıtsal (inherited) olmasıdır. Bir üst öğeye pointer-events: none atadığınızda, alt öğeler de bu değeri miras alır. Ancak alt öğeler, kendi pointer-events değerlerini auto olarak ayarlayarak bu mirası geçersiz kılabilir. Örneğin, bir kapsayıcıya none atayıp içindeki bir butona auto verirseniz, buton tıklanabilir olurken kapsayıcının diğer kısımları tıklanamaz kalır. Bu, özellikle bindirme katmanları (overlay) veya engelleyici öğeler oluştururken kullanışlıdır.
Pratik kullanımda pointer-events, web geliştiricilere etkileşimli öğeler üzerinde hassas kontrol sağlar. Örneğin, bir düğmenin üzerinde saydam bir kaplama varsa, bu kaplamaya none atayarak tıklamaların altındaki düğmeye geçmesini sağlayabilirsiniz. Ayrıca SVG haritaları veya grafikleri üzerinde yalnızca belirli bölgelere tıklanabilirlik kazandırmak için SVG’ye özgü değerler idealdir. Bu özellik, kullanıcı deneyimini iyileştirmek ve etkileşimli arayüzler oluşturmak için güçlü bir araçtır.
Kaynak: css-tricks.com
