Javascript 2元素被同时单击打开和关闭html标记

我有一个html div标记，它通过onclick事件打开。在这个div标记中是另一个htmli标记，它还有一个onclick事件用于关闭div标记。问题当然是，现在div标记总是打开的，因为close按钮在div标记内，它与open按钮同时工作，好的，请查看我的代码以使其更容易：

<div onclick="OpenElement(1)">Element 1
<div id="element1">
  <i onclick="CloseElement(1)">&ensp;</i>
  <h2>Element</h2>
</div>
</div>

<script>
function OpenElement(nr)
{
 var elementnr="element"+nr;
 document.getElementById(elementnr).style.display  = 'block';
}

function CloseElement(nr)
{
 var elementnr="element"+nr;
 document.getElementById(elementnr).style.display  = 'none';
}
</script>

元素1
&ensp；
元素
函数开放元素（nr）
{
var elementnr=“element”+nr；
document.getElementById（elementnr.style.display='block'；
}
功能元件（nr）
{
var elementnr=“element”+nr；
document.getElementById（elementnr.style.display='none'；
}

---

现在的问题是，我必须如何对其进行编码以确保其正常工作，当我单击div标记时，它必须打开，只有当您单击关闭按钮时，它才能关闭？

我认为您应该在

CloseElement

函数（）中使用

stopPropagation

---

它将使用

OpenElement

函数阻止事件冒泡到封闭的

div

。

必须停止事件传播，因为默认情况下，事件会向上传播DOM树到其父级

函数开放元素（nr）{
var elementnr=“element”+nr；
document.getElementById（elementnr.style.display='block'；
警报（“开放”）；
}
功能元件（nr）{
var elementnr=“element”+nr；
document.getElementById（elementnr.style.display='none'；
警报（“关闭”）
}
函数关闭事件（事件）{
event.stopPropagation（）；
闭合元件（1）；
}

要素1
&ensp；关闭
元素

单击子元素也会触发单击其父元素。这是事件传播

要避免这种情况，必须手动停止传播。（见附件）

function parentClick（e）
{
警报（“家长点击”）；
}
函数childClick（e）
{
警报（“儿童点击”）；
e、 停止传播（）；
}

div{
光标：指针；
边框：1px纯黑；
填充：10px；
}

父元素
子元素

单击事件气泡到父元素谢谢大家的帮助，我知道这与传播有关，现在我也知道如何在您的帮助下解决它。