CSS’de pointer-events özelliği, bir elemanın fare tıklamaları, hover durumları ve dokunmatik olaylar gibi işaretçi tabanlı etkileşimlerin hedefi olup olamayacağını kontrol eder. Kısacası, tarayıcının bir elemanı işaretçi altındayken etkileşimli olarak değerlendirip değerlendirmeyeceğine karar vermenizi sağlar. Örneğin, .no-pointer-events sınıfına sahip bir elemana pointer-events: none; uygulandığında, o eleman tıklanamaz hale gelir ve altındaki elemanlar etkileşime açılır.
Özelliğin nasıl çalıştığını anlamak için tarayıcının işaretçi olayını ateşlemeden önce ne yaptığını bilmek önemlidir. İlk olarak tarayıcı, işaretçinin altında hangi elemanın olduğunu belirler. Bu sürece 'hit-testing' (isabet testi) denir. Normalde tarayıcı, işaretçinin altındaki en üstteki elemanı seçer. Ancak bu elemanın pointer-events değeri none ise tarayıcı onu atlar ve bir sonraki uygun elemanı aramaya devam eder. Bu mantıkla düşünüldüğünde, pointer-events olayları devre dışı bırakmak yerine hangi elemanın olay hedefi olacağını değiştirir.
pointer-events özelliğinin sözdizimi oldukça esnektir. Başlangıç değeri auto‘dur ve tüm HTML elemanlarına uygulanabilir. SVG’de ise konteyner, grafik ve
Sistem Güvenliği
HTML elemanları için en yaygın kullanılan değerler auto ve none‘dır. auto varsayılan değerdir; eleman normal davranır ve işaretçi olaylarını alabilir. SVG’de auto, visiblePainted ile aynı davranışı gösterir. none ise elemanın kendisinin işaretçi olaylarının hedefi olamayacağı anlamına gelir; tıklanamaz veya üzerine gelinemez. Bunun yerine tarayıcı, altındaki elemanı hedef alır. Örneğin, bir düğmenin üzerine saydam bir katman koyup tıklamaları altındaki düğmeye yönlendirmek için kullanılabilir.
SVG’ye özel değerler daha ayrıntılı kontrol sağlar. visiblePainted: Eleman yalnızca görünür (visibility: visible) ve işaretçi boyalı bir kısım üzerindeyse (fill veya stroke none değilse) olay alır. visibleFill: Görünür olduğunda ve işaretçi dolgu alanı üzerindeyse olay alır; fill değeri none bile olsa. visibleStroke: Görünür olduğunda ve işaretçi kontur üzerindeyse olay alır; stroke değeri none bile olsa. visible: Görünür olduğunda ve işaretçi dolgu veya kontur üzerindeyse olay alır; fill/stroke değerlerinden bağımsız. painted: Görünürlükten bağımsız olarak, işaretçi boyalı bir kısım üzerindeyse (dolgu veya kontur) olay alır. fill: Sadece dolgu alanı üzerindeyken olay alır; fill ve visibility değerlerinden bağımsız. stroke: Sadece kontur üzerindeyken olay alır; stroke ve visibility değerlerinden bağımsız. bounding-box: Elemanın sınırlayıcı kutusu (en küçük dikdörtgen) içinde herhangi bir yerde olay alır; şekilden veya boyalı olup olmamasından bağımsız. all: Dolgu veya kontur üzerindeyken olay alır; fill, stroke, visibility değerlerinden bağımsız.
pointer-events’in kalıtsal bir özellik olduğunu unutmamak önemlidir. Bir üst elemana pointer-events: none uygulandığında, alt elemanlar da bu değeri devralır. Ancak herhangi bir alt eleman, pointer-events: auto (veya başka bir geçerli değer) atayarak bu devralmayı geçersiz kılabilir. Örneğin, bir kapsayıcıya pointer-events: none verip içindeki belirli bir alt elemana pointer-events: auto vererek, sadece o alt elemanın tıklanabilir olmasını sağlayabilirsiniz. Bu, özellikle karmaşık katmanlı arayüzlerde veya SVG grafiklerde kullanışlıdır.
Kaynak: css-tricks.com
