如何实现仅点击外层div时播放音频，点击内层div不触发？

这是因为浏览器的事件冒泡机制在搞鬼——当你点击内层div时，事件会从内层元素一路向上传播到外层的父元素，所以外层div的点击事件也被顺带触发了。给你几个靠谱的解决办法：

方法一：在内层点击事件中阻止冒泡 #

直接在内层形状div的点击处理函数里，阻止事件继续向上传播，这样外层的点击事件就不会被触发了：

// 假设内层形状div的id是shapeDiv
document.getElementById('shapeDiv').onclick = function(e) {
  // 执行加分逻辑
  score += 1;
  // 阻止事件冒泡到外层div
  e.stopPropagation();
};

// 外层背景div的点击事件保持不变
var $audioLifeLost = new Audio('Mis.mp3');
document.getElementById('divid').onclick = function (){ 
  $audioLifeLost.play(); 
};

这里的e.stopPropagation()是关键，它能切断事件的传播链条，让内层的点击事件“到此为止”。

方法二：在外层事件中判断点击目标 #

如果你不想修改内层的事件逻辑，可以在外层div的点击处理里，判断触发事件的是不是外层本身：

var $audioLifeLost = new Audio('Mis.mp3');
document.getElementById('divid').onclick = function(e) {
  // 只有当点击的目标是外层div自己时，才播放音频
  if (e.target === this) {
    $audioLifeLost.play();
  }
};

// 内层div的加分逻辑正常写
document.getElementById('shapeDiv').onclick = function() {
  score += 1;
};

e.target是实际被点击的元素，this指向外层div本身，当两者相等时，说明点击的是外层的空白区域，才执行播放操作。

方法三：用事件委托统一处理（适合多内层元素场景） #

如果以后你的项目里会有多个内层形状div，用事件委托会更高效——把所有点击事件都绑定在外层div上，根据点击的目标来区分操作：

var $audioLifeLost = new Audio('Mis.mp3');
document.getElementById('divid').onclick = function(e) {
  if (e.target.id === 'shapeDiv') {
    // 点击了内层形状，执行加分
    score += 1;
  } else {
    // 点击了外层背景，播放音频
    $audioLifeLost.play();
  }
};

这种方式不用给每个内层元素单独绑定事件，代码更简洁，也方便后续扩展。

另外提醒一下，要确保Mis.mp3的文件路径是正确的，不然音频可能无法正常播放哦～

内容的提问来源于stack exchange，提问作者The UndertakerGL