Указател-събития - CSS-трикове

В pointer-eventsимота дава възможност за контрол върху начина на HTML елементи отговори на мишката / докосване събития - включително CSS висене / активните държави, кликнете / докоснете събития в Javascript и дали курсорът се вижда или не.

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

Докато pointer-eventsсвойството приема единадесет възможни стойности, всички освен три от тях са запазени за използване със SVG. Трите валидни стойности за всеки HTMl елемент са:

none предотвратява всички опции за щракване, състояние и курсор върху посочения HTML елемент
autoвъзстановява функционалността по подразбиране (полезно за използване в дъщерни елементи на елемент с pointer-events: none;посочен
inheritще използва pointer-eventsстойността на родителя на елемента

Вижте тази писалка!

Както беше показано по-горе, основният случай на използване pointer-eventsе да се позволи поведението на щракване или докосване да „премине” през елемент до друг елемент под него по оста Z. Например, това би било полезно за графични наслагвания или скриване на елементи с opacity(напр. Подсказки) и все още позволява избор на текст върху съдържанието под него.

Точки на интерес

„Използването на указатели-събития в CSS за не-SVG елементи е експериментално. Преди функцията беше част от спецификацията на CSS3 UI проект, но поради много отворени проблеми беше отложена за CSS4. " - Mozilla MDN
„Ако добавите слушател на събитие за щракване към елемент, след това премахнете стила на указателя за събития (или променете стойността му на автоматично, събитието за щракване ще задейства определената функционалност. По същество събитието за щракване зачита стойността на показалеца за събития.“ - Дейвид Уолш

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.