仅单击图像时如何触发事件侦听器？答案

【问题标题】：How do I trigger an event listener when clicking on only an image?仅单击图像时如何触发事件侦听器？
【发布时间】：2022-11-04 01:13:03
【问题描述】：

目前我有一个包含两个（+）图像的 div 元素。一张图片的 z-index 为 1，位于另一张图片的后面。当您仅单击第一张图像时，我想触发事件侦听器。

当我单击 z-index 为 2 的较小图像时，会发生 z-index 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，toggleDiv 和 favoriteChamp 就会执行，但我只想让 favoriteChamp 执行。

【问题讨论】：

看起来您将两个事件侦听器附加到“favButton”。不确定这是否是您想要的。也许应该将其中一个偶数听众附加到“champImg”。如果是，请编辑您的问题

标签： javascript html dom dom-events

【解决方案1】：

你有冒泡的问题。

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

你要么需要这个：

event.stopPropagation()

或这个：

event.stopImmediatePropagation()

要完全理解发生了什么以及如何处理传播，您可以阅读以下内容：

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

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

【讨论】：