Использование css-свойства pointer-events
![Illustration of a person sitting on the ground against a wall, engrossed in reading a book. The image exhibits a stylized, sketched feel with minimal color, highlighting the person's orange scarf and sneakers.](https://assets.mkdev.me/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcHdGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--72f668eb902fa3e7592bcd248631939bba2b6cad/mkdev_article.png?locale=ru)
![Illustration of a person sitting on the ground against a wall, engrossed in reading a book. The image exhibits a stylized, sketched feel with minimal color, highlighting the person's orange scarf and sneakers.](https://assets.mkdev.me/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcHdGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--72f668eb902fa3e7592bcd248631939bba2b6cad/mkdev_article.png?locale=ru)
Это может показаться удивительным, но существует css-атрибут pointer-events, который позволяет, например, выключить все события, которые можно вызвать на элементе нажатием мышки (или пальцем):
#overlay {
pointer-events: none;
}
Да, отключить обработку событий при помощи css. Поддерживается всеми нормальными браузерами. Один из примеров использования: есть оверлэй поверх все страницы, и всё ещё хочется что бы элементы под оверлеем реагировали на нажатия как будто оверлея нет. На сайте MDM очень хорошо расписаны различные значения и особенности использования pointer-events.