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";
}

这将阻止事件从“冒泡”到父元素/处理程序。

Answer 2

该事件冒泡。为防止该事件，请使用stopPropagation

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(e) {
  e.stopPropagation()
  div_div.style.backgroundColor = "blue";
}

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

根据您单击的位置更改div上的颜色

2 个答案: