Как работает атрибут defer и async у тега script?

Запрет всплытия событий через CSS

Сразу важное уточнение: CSS не может запретить всплытие событий. Всплытие событий — это поведение JavaScript, контролируемое методами event.stopPropagation() и event.preventDefault(). Однако CSS имеет несколько способов, которые косвенно влияют на обработку событий.

Способ 1: pointer-events (самый эффективный)

Свойство pointer-events позволяет элементу не участвовать в обработке событий мыши и касания. Это самый близкий способ к "запрету всплытия" в CSS:

// CSS
.modal-overlay {
  pointer-events: none; // Элемент не будет получать события
}

.modal-content {
  pointer-events: auto; // Но контент внутри может получать события
}

// Пример: модальное окно с оверлеем
const overlay = document.querySelector('.modal-overlay');
const content = document.querySelector('.modal-content');
// Клик по overlay не сработает благодаря pointer-events: none

Способ 2: Использование CSS для блокировки событий

Хотя это не прямое запрещение всплытия, можно использовать ::before и ::after для создания слоя, который перехватывает события:

.prevent-interaction {
  position: relative;
}

.prevent-interaction::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto; // Этот слой перехватывает события
  z-index: 10;
}

.prevent-interaction button {
  pointer-events: none; // Кнопка не может быть кликнута
}

Способ 3: disabled атрибут (не CSS, но связано)

Для формовых элементов используй disabled атрибут, который также контролирует события:

// HTML
<button disabled>Кнопка отключена</button>
<input disabled type="text" />

// Эти элементы не генерируют события click
// И не пропускают события дальше

Правильный способ запрета всплытия (JavaScript)

Для реального запрета всплытия нужно использовать JavaScript:

// Запрет всплытия
element.addEventListener('click', (event) => {
  event.stopPropagation(); // Останавливает всплытие
  event.preventDefault(); // Отменяет поведение по умолчанию
});

// Пример: модаль
const modalContent = document.querySelector('.modal-content');
modalContent.addEventListener('click', (e) => {
  e.stopPropagation(); // Клик внутри модали не закроет её
});

const modal = document.querySelector('.modal');
modal.addEventListener('click', () => {
  modal.close(); // Клик на фон закроет модаль
});

Комбинированный подход

Оптимальное решение — комбинация CSS и JavaScript:

// CSS использование через JS
const overlay = document.querySelector('.modal-overlay');
overlay.style.pointerEvents = 'none';

// Активируем, когда модаль открыта
function openModal() {
  overlay.style.pointerEvents = 'auto';
}

const content = document.querySelector('.modal-content');
content.addEventListener('click', (e) => {
  e.stopPropagation(); // Предотвращаем закрытие при клике внутри
});

Правила для разных типов событий

• mouse events (click, mouseover) — контролируются pointer-events
• touch events — контролируются pointer-events
• focus events — нельзя отключить через CSS
• keyboard events — нельзя отключить через CSS

Резюме

• CSS не может напрямую запретить всплытие событий
• pointer-events: none — это способ отключить обработку событий для элемента
• Для реального контроля всплытия используй event.stopPropagation() в JavaScript
• Комбинируй CSS для визуального контроля с JavaScript для логики событий
• При работе с событиями всегда помни о разнице между stopPropagation() и preventDefault()