Işaretçi olayları - CSS Hileleri

pointer-eventsMülkiyet üzerinde kontrol sağlayacağı nasıl fareye HTML öğelerini tepki / dokunmatik olayları - CSS vurgulu / aktif devletler, tıklama / JavaScript musluk olayları ve imleç görünür olup olmadığını da dahil.

.avoid-clicks ( pointer-events: none; )

pointer-eventsÖzellik on bir olası değer alırken, bunların üçü hariç tümü SVG ile kullanım için ayrılmıştır. Herhangi bir HTMl öğesi için üç geçerli değer şunlardır:

none belirtilen HTML öğesindeki tüm tıklama, durum ve imleç seçeneklerini engeller
autovarsayılan işlevselliği geri yükler ( pointer-events: none;belirtilen bir öğenin alt öğelerinde kullanım için yararlıdır.
inheritpointer-eventsöğenin ebeveyninin değerini kullanacak

Bu Kaleme bakın!

Yukarıda gösterildiği gibi, birincil kullanım durumu pointer-eventstıklama veya dokunma davranışının bir öğeyi Z ekseninde altındaki başka bir öğeye "geçirmesine" izin vermektir. Örneğin, bu, grafik kaplamalar için veya öğelerin opacity(örn. Araç ipuçları) gizlenmesi ve yine de altındaki içerikte metin seçimine izin verilmesi için yararlı olacaktır .

İlgi noktaları

"CSS'de işaretçi olaylarının SVG olmayan öğeler için kullanımı deneyseldir. Özellik eskiden CSS3 kullanıcı arayüzü taslak belirtiminin bir parçasıydı, ancak birçok açık sorun nedeniyle CSS4'e ertelendi. " - Mozilla MDN
"Bir öğeye bir tıklama olayı dinleyicisi eklerseniz, ardından işaretçi olayları stilini kaldırırsanız (veya değerini otomatik olarak değiştirirseniz, tıklama olayı belirlenen işlevi çalıştırır. Temel olarak, tıklama olayı işaretçi olayları değerine uyar." - David Walsh

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.