Как отследить клик по любой ссылке на странице?

Question

Суть в том, что хочу затемнять страницу, после нажатия на ссылку. Т.е., в тот момент, пока браузер не загрузил ещё новую страницу.

Мне необходимо отследить клик по любой ссылке на странице и выполнить функцию. Не подскажите, как мне отследить нажатие на ссылку?

Нужно именно на чистом JS.

Answer 1

Для всей страницы лучше делать через делегирование событий, определить функцию клика, далее убедится что клик произошел именно на ссылке. Для того чтобы ссылка не открылась (действие по умолчанию) это нужно запретить методом preventDefault()

 <a href="https://google.com">открыть гугл</a>

 <script type="text/javascript">
  window.addEventListener('click', filter, false)
  function filter(e){
    if (e.target.tagName === 'A'){ // провека что кликнули на ссылку
      console.log(e.target.href);  // получаем URL адрес ссылки
      e.preventDefault();          // отменяем переход 
         
      /*  реализуете свою логику  */

      window.location.href = e.target.href; // переходите по ссылке
    }
  }
 </script>

для более надежного перехвата нужно не забыть про события:

onmouseup
oncontextmenu
onkeydown
touchstart

если на окно больше никаких событий не будете навешивать можно сделать это цепочкой присвоений:

window.onclick = window.onmouseup = window.oncontextmenu =
window.onkeydown = window.touchstart = function(e){...}

Answer 2

Можно использовать делегирование событий:

document.addEventListener('click', function(e) {
  if(e.target.tagName === 'A') {
    e.preventDefault(); // Отменяем переход по ссылке
    console.info(e.target.href);
  }
});

<a href="https://google.com">Ссылка</a>

<div>
  <div>
    <div>
      <a href="https://yandex.ru">Глубоко</a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как отследить клик по любой ссылке на странице?

Ответы (2 шт):