Javascript 同时点击 2 个元素打开和关闭 html 标签

Question

i have a html div tag which gets opened with a onclick event. in this div tag is another html i tag which also have a onclick event for closing the div tag. The problem is of course now that the div tag gets always open because the close button is inside the div tag which works same time as a open button, ok just have a look to my code to make it easyer:

<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>

The question is now how must i code it that it works correctly, the div tag must get open when i click on it and it must get close only when you click the close button?

Answer 1

I think you should use stopPropagation in your CloseElement function ( https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation )

It will stop the event from bubbling up to your enclosing div with the OpenElement function.

Answer 2

You must stop the event propagation, as by default the event propagates up the DOM tree to its parent.

 function OpenElement(nr){ var elementnr="element"+nr; document.getElementById(elementnr).style.display = 'block'; alert("open"); } function CloseElement(nr){ var elementnr="element"+nr; document.getElementById(elementnr).style.display = 'none'; alert("close") } function closeEvent(event){ event.stopPropagation(); CloseElement(1); }

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

Answer 3

Click on the child element also triggers click on its parent. This is event propagation.

To avoid this, you have to stop propagation manually. (See Event.stopPropagation )

 function parentClick(e) { alert("Parent Click"); } function childClick(e) { alert("child click"); e.stopPropagation(); }

 div { cursor: pointer; border: 1px solid black; padding: 10px; }

 <div onclick="parentClick(event)">Parent Element <div onclick="childClick(event)">Child Element</div> </div>