Как можно одним простым действием запретить переходы по ссылкам, нажатия на кнопки и другие действия на всей странице?

Как обеспечить работу ховеров на кнопках и ссылках, а также сохранить функционал скролла, анимации и других элементов страницы?
  • 19 октября 2023 г. 11:09
Ответы на вопрос 2
Одним из способов запретить переходы по ссылкам и нажатия на кнопки на всей странице является использование следующего CSS-правила:

```css
body {
  pointer-events: none;
}
```

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

Однако, при использовании этого правила, также отключатся все остальные события указателя мыши, включая ховеры на кнопках и ссылках.

Чтобы сохранить функционал ховеров на кнопках и ссылках, а также работу скролла, анимаций и других элементов страницы, можно использовать следующий JavaScript-код:

```javascript
document.body.addEventListener('mouseover', function(event) {
  event.stopPropagation();
  document.body.style.pointerEvents = 'none';
  setTimeout(function() {
    document.body.style.pointerEvents = 'auto';
  }, 500);
});
```

Этот код добавляет обработчик события мыши для тела документа. При наведении указателя мыши на страницу, код отключает pointer-events в течение 500 миллисекунд, чтобы восстановить функциональность ховеров и других событий указателя мыши.

Пример работы кода можно посмотреть на песочнице CodePen: [https://codepen.io/pen/?&editable=true&editors=1010](https://codepen.io/pen/?&editable=true&editors=1010)
Не активируйте ссылки и кнопки по клику:
- $( "a, button" ).on( "click", function( event ) {
  event.preventDefault();
});

Не допускайте активации ссылок и кнопок при нажатии:
- $( "a, button" ).on( "click", function( event ) {
  event.preventDefault();
});
Похожие вопросы