根据您点击的位置,在div上更改颜色

Question

我有一个div和一个button内部.div例如,当你在里面点击时,我希望变成红色div,但如果你点击button里面的那个,那么div应该变成蓝色.

所以要明确的是,只有div那个应该改变颜色,这取决于点击事件是在button或在中div.

我的问题是,即使单击按钮,它也会变为红色,因为按钮位于div标签内.

这是我提出的代码:

var div_div = document.getElementById("div");
var btn_btn = document.getElementById("btn");

div_div.onclick = function() {
  div_div.style.backgroundColor = "red";
}

btn_btn.onclick = function() {
  div_div.style.backgroundColor = "blue";
}

<div id="div" style=" width:200px; height:200px; border:2px solid #000; ">
    <button id="btn">Button</button>
</div>

按钮需要在div内.

Answer 1

对于按钮上的onclick,请确保使用stopPropagation():

btn_btn.onclick = function(e) {
    e.stopPropagation();
    div_div.style.backgroundColor = "blue";
}

这会阻止事件"冒泡"到父元素/处理程序.