Блокировка клик-события через CSS: свойства и решения

Быстрый ответ

Для того, чтобы сделать элемент невосприимчивым к кликам мыши, используйте свойство CSS pointer-events со значением none.

.avoid-click { pointer-events: none; /* Попробуйте кликнуть сейчас! */ }

Примените класс avoid-click к нужному элементу:

<div class="avoid-click">Клики здесь не действуют</div>

Однако, учтите, что данный метод влияет только на действия мыши и не блокирует взаимодействие с клавиатурой или сенсорными устройствами.

Дополнительные соображения: События клавиатуры и сенсорные экраны

Хотя pointer-events: none; эффективно блокирует клики мыши, на клавиатурное управление или сенсорные события это свойство не воздействует. Для их блокировки нужно:

• Клавиатура: Чтобы элемент не был доступен для навигации с помощью клавиши Tab, его следует сделать недоступным таким способом или воспользоваться JavaScript для контроля событий фокуса.
• Сенсорный экран: Как и для мыши, pointer-events: none не блокирует сенсорное взаимодействие. Однако, его можно регулировать с помощью настроек сенсорной активности в JavaScript.

Когда использование pointer-events: none целесообразно?

Pointer-events: none; достаточно полезно для улучшения удобства использования в следующих случаях:

1. Предотвращение ошибок: Если предполагается, что с элементом не будет взаимодействия или функциональность ещё не готова, pointer-events: none; станет незаменимым помощником.
2. Визуальные индикаторы: Используйте в сочетании с такими свойствами CSS, как прозрачность, для отображения неактивности элемента.
3. Сложный интерфейс: Упрощает работу с контентом, который находится под другими элементами с возможностью наложения.
4. Анимации: Временное применение во время анимаций поможет избежать случайных кликов.

Когда CSS недостаточно: Альтернативные решения

Если требуется контролировать сенсорные и клавиатурные события наряду с действиями мыши, пригодится JavaScript. Вот пара подходов:

Обработка при помощи обработчика событий

document.getElementById('elemID').addEventListener('click', function(e) {
  e.preventDefault(); // Стоять! Дальше нельзя! 🛑
}, false);

Обработка непосредственно через атрибут

document.getElementById('elemID').onclick = function() { return false; /* "Нет влияния", – так скажет клик */ }

Мелкий шрифт: Ограничения при блокировке кликов с помощью CSS

Совместимость с браузерами: Свойство pointer-events: none; поддерживается большинством современных браузеров, однако может не функционировать в устаревших. Рекомендуем проверить совместимость на ресурсе Can I use....

Семантика: Использование CSS для блокировки взаимодействия может сбивать с толку пользователей, особенно если отсутствуют визуальные индикаторы. Делайте акцент на доступности и удобстве для пользователя при использовании pointer-events: none.

Визуализация

Подумайте о CSS как о барьере для события клика, который действует подобно знаку на перекрёстке, регулируя дорожное движение:

🛣️ Обычное движение (Клики) 🚗💨 -> [Кнопка] -> 🎯 Цель события

Установка "дорожного знака" CSS 🚧:

button {
  pointer-events: none; /* Извините, проезжая часть перекрыта, просьба объехать! */
}

Результат изменений:

🛣️ Движение (Клики) 🚗💨 -> [🚧 Кнопка (Новое правило)] -> 🚫 Событие отменено

CSS pointer-events: none работает как запрещающий знак: клики не проходят и все потоки приостанавливаются!

Создание качественного пользовательского опыта с помощью pointer-events: none

Ясные и интуитивно понятные сигналы о взаимодействии играют большую роль в удобстве использования продукта. При применении pointer-events: none следуйте следующим рекомендациям:

• Изменение курсора: Используйте курсор default для визуального указания, что элемент не реагирует на клики.
• Эффекты перехода: Применяйте свойства CSS, такие как непрозрачность (opacity) и переходы (transitions), чтобы мягко указать на недоступность взаимодействия.
• Доступность: Не забывайте о пользователях с ограниченными возможностями. Используйте атрибуты вроде aria-disabled для лучшего понимания состояния элемента.

Тактическое использование pointer-events: none в дизайне

Интерактивные карты

Наложив прозрачный слой с pointer-events: none на карту, можно избежать случайных кликов при прокрутке страницы.

Подробнее об этом расскажет наш спикер на видео

Управление подсказками

Неинтерактивные всплывающие подсказки не блокируют доступ к элементам под ними, обеспечивая плавный пользовательский опыт.

Работа с SVG

Вы можете управлять взаимодействием с элементами под SVG, применив pointer-events: none непосредственно к SVG.

Полезные материалы

1. pointer-events | CSS-Tricks – CSS-Tricks — Всё, что вам хотелось узнать о pointer-events для управления взаимодействиями с мышью.
2. pointer-events – CSS: Cascading Style Sheets | MDN — Официальная документация по свойству pointer-events.
3. html – css 'pointer-events' property alternative for IE – Stack Overflow — Идеи сообщества по альтернативам 'pointer-events' для IE.
4. CSS pointer-events property — Учебник по использованию pointer-events.
5. Can I use... Support tables for HTML5, CSS3, etc — Совместимость свойства с различными браузерами.
6. Now You See Me – A List Apart — Подробный анализ влияния UX при использовании CSS для блокировки кликов.
7. web-platform-tests dashboard — Разнообразие тестовых примеров и статусы реализации свойства pointer-events.