Как предотвратить распространение события при переходе по ссылке?

Когда я нажимаю на свой a-тег, я не хочу, чтобы запускалось родительское событие. Если бы у ребенка был обычный прослушиватель событий, это можно было бы предотвратить с помощью event.stopPropagation (), но как мне это сделать, если нет «события»?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parent" style="width:100px; height:100px; background-color: red">
    <a id="child" href="https://i.kym-cdn.com/entries/icons/facebook/000/013/564/doge.jpg">Text</a>
</div>
<script>
    document.getElementById("parent").addEventListener("click", function () {
        alert("Oh no, you clicked me!");
    });
</script>
<script src="test.js"></script>
</body>
</html>
3
0
2 322
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Подход 1

If the child had a normal event listener, it could be prevented by event.stopPropagation()

да.

but how do I do it when there is no "event"?

Есть мероприятие. Вы просто не слушаете этого.

Вы можете решить проблему, прослушивая дочерний элемент:

document.getElementById("parent").addEventListener("click", function() {
  alert("Oh no, you clicked me!");
});

document.querySelector("a").addEventListener("click", function(e) {
  e.stopPropagation();
});
<div id="parent" style="width:100px; height:100px; padding: 1em; background-color: #aaa">
  <a id="child" href="https://placeimg.com/200/200/nature/sepia">Text</a>
</div>

Подход 2

В качестве альтернативы вы можете проверить target события и посмотреть, является ли оно неприемлемым.

const blacklist = [document.querySelector("a")];

document.getElementById("parent").addEventListener("click", function(e) {
  if (blacklist.includes(e.target)) {
    return;
  }
  alert("Oh no, you clicked me!");
});
<div id="parent" style="width:100px; height:100px; padding: 1em; background-color: #aaa">
  <a id="child" href="https://placeimg.com/200/200/nature/sepia">Text</a>
</div>

Просто добавьте прослушиватель кликов к ссылке, по которой вы делаете event.stopPropagation();. Это предотвратит появление пузырьков при щелчке по дочернему элементу (и, таким образом, срабатывание щелчка по родительскому элементу).

document.getElementById("parent").addEventListener("click", function() {
  console.log('parent received click');
});

document.getElementById("child").addEventListener("click", function(e) {
  e.preventDefault(); // this line prevents changing to the URL of the link href
  e.stopPropagation(); // this line prevents the link click from bubbling
  console.log('child clicked');
});
<div id="parent" style="width:100px; height:100px; background-color: red">
  <a id="child" href="https://i.kym-cdn.com/entries/icons/facebook/000/013/564/doge.jpg">Text</a>
</div>
<script>
</script>

попробуй это.

document.getElementById(id-here).addEventListener("click", function(e) {
  e.stopImmediatePropagation();
  console.log("clicked");
});

По моему опыту, звонок event.stopImmediatePropagation(); даст вам ожидаемые результаты.

Похоже, вы скопировали вставленный код из моего ответа ... сломав его, потому что blacklist не определен в вашей версии ... который также не понимает вопроса. Ваше добавление остановит запуск событий для предков «parent», но целью было остановить событие для «parent», если была нажата ссылка внутри «parent».

Quentin 10.08.2018 17:51

Извините, я только что получил код и подумал, что это из вопроса. подожди, я отредактирую

Ishara Jayaweera 10.08.2018 17:51

+ Я хотел выделить функцию stopImmediatePropagation () .. не код

Ishara Jayaweera 10.08.2018 17:53

Как я указывал в своем предыдущем комментарии, вызов stopImmediatePropagation для «родительского» не решит проблему.

Quentin 10.08.2018 17:54

да, согласен, здесь ID должен быть ID дочернего элемента.

Ishara Jayaweera 10.08.2018 17:57

Итак, теперь ваш ответ по сути такой же, как два, которые были написаны полчаса назад.

Quentin 10.08.2018 18:04

Объект event также доступен в обработчике onclick:

<a id="child" href="https://i.kym-cdn.com/entries/icons/facebook/000/013/564/doge.jpg"
  onclick="event.stopPropagation()">Text</a>

На основе это.

⚠️ Несовместимо с Internet Explorer, однако отлично работает с Край (проверено на v89).

Другие вопросы по теме