如何避免点击上层图片时触发父元素的事件监听器？

问题出在事件冒泡机制：点击子元素favButton时，事件会顺着DOM树向上传播，触发父元素champDiv绑定的toggleDiv函数。下面给两种直接可行的解决办法：

办法一：在子元素事件里阻止冒泡 #

在favButton的点击事件处理中，加入event.stopPropagation()，让事件到这里就停止传播，不会触发父元素的事件。

可以把两个事件合并到一个处理函数里：

favButton.addEventListener('click', function(event) {
  favoriteChamp();
  setCookie();
  event.stopPropagation(); // 阻止事件往上传到父div
});

要是想保留分开绑定的写法，在其中一个函数里加阻止冒泡就行：

favButton.addEventListener('click', function(event) {
  favoriteChamp();
  event.stopPropagation();
});
favButton.addEventListener('click', setCookie);

办法二：在父元素事件里判断点击目标 #

如果不想改动子元素的事件逻辑，就在父元素的toggleDiv函数里做判断，只有点击的是champImg（带champion类的元素）时，才执行原本的逻辑：

function toggleDiv(event) {
  // 只在点击目标是champImg时执行逻辑
  if (event.target.classList.contains('champion')) {
    // 这里写toggleDiv原来的代码
  }
}

两种方法都能达成需求：点favButton只跑favoriteChamp和setCookie，点底层的champImg才触发toggleDiv。

内容的提问来源于stack exchange，提问作者un pollo