javascript - 如果只有 div 1 被点击，播放声音

Question

在我的项目中，我有一个很大的div，那个div中还有一个div作为形状。

当你点击形状时，你做对了，你有 1 分。当您仅单击背景 div 时，我想播放声音。

当我这样做时(简单示例):

var $audioLifeLost = new Audio('Mis.mp3');

#divid.onclick = function (){
$audioLifeLost.play();
}

它还会在我点击形状时播放声音，因为我同时点击了两个 div。

无论如何我该怎么做？

Answer 1

您需要stop the event from propagating由家长决定:

document
  .querySelector('#inner')
  .addEventListener('click', e => {
    console.log('click inner');
    e.stopPropagation(); // <-- stop event propagation
  })

document
  .querySelector('#outer')
  .addEventListener('click', () => {
    console.log('click outer');
  })

#outer {
  background: pink;
  height: 300px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#inner {
  background: salmon;
  width: 150px;
  height: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>