Предотвращение поведения ссылки по умолчанию при нажатии где-либо в элементе <a>

Question

Допустим, у нас есть такая структура:

document.querySelector(".container").addEventListener("click", e => {
  e.stopImmediatePropagation();
}

<a href="page2.html" class="container">
  <div class="preventGoToLinkWhenClick">
    button for open video modal
  </div>
</a>

Когда я нажимаю на div внутри, он не должен go к ссылке. Это возможно? Я пробовал stopImmediatePropagation(), но не работает.

Но должен работать элемент <a>, если щелкнуть за пределами div

Answer 1

Используйте прослушиватель событий, чтобы предотвратить действие по умолчанию, если выбранный элемент содержит класс preventGoToLinkWhenClick (или любой определенный вами критерий), в противном случае просто верните

document.addEventListener("click", evt => {
  if (evt.target.classList.contains("preventGoToLinkWhenClick")) {
   evt.preventDefault();
  }
  return;
});

<a href=//www.google.com" class="container">
  <div class="preventGoToLinkWhenClick">
    button for open video modal
  </div>
  [click to open]
</a>