当仅单击图像时，如何触发事件侦听器

Question

当前我有一个div元素，它包含两个(+(图像。一个图像的z索引为1，并且位于另一个图像之后。当你只点击第一个图像时，我想触发一个事件监听器。

当我单击z索引为2的较小图像时，z索引为1的图像的事件侦听器就会出现。网站链接：hi2.aisliniscool.repl.co相关JS代码：

const champDiv = document.createElement('div');
const champImg = document.createElement('img'); //(z-index 1)
const favButton = document.createElement('img');
champDiv.addEventListener('click', toggleDiv);
favButton.addEventListener('click', favoriteChamp); //(z-index 2)
favButton.addEventListener('click', setCookie);
favButton.src = "/ext/icons/transparent.png";
favButton.classList.add('favButton');
champDiv.classList.add('champdiv');
champImg.classList.add('champion');

如果我点击favButton，切换Div和favoriteChamp执行，但我只想让favorteChamp执行。

Answer 1

您有冒泡的问题。

当您触发父母的子事件时，您需要阻止他们的事件触发。

你要么需要这个：

event.stopPropagation()

或者这个：

event.stopImmediatePropagation()

要完全理解正在发生的事情以及如何处理传播，您可以阅读以下内容：

https://javascript.info/bubbling-and-capturing

https://www.freecodecamp.org/news/event-propagation-event-bubbling-event-catching-beginners-guide/