在打开和关闭html标记的同时单击Javascript 2元素。
在打开和关闭html标记的同时单击Javascript 2元素。
提问于 2019-10-23 18:24:25
我有一个用onclick事件打开的html div标签。在这个div标签中还有另一个html i标签，它也有一个关闭div标签的onclick事件。当然，问题是现在div标签总是打开的，因为关闭按钮在div标签中，它与打开按钮的工作时间相同，好吧，看看我的代码，让它更容易：
<div onclick="OpenElement(1)">Element 1
<div id="element1">
<i onclick="CloseElement(1)"> </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>现在的问题是，我必须如何编码它才能正确工作，div标签必须在我单击它时打开，它必须只有在您单击close按钮时才能关闭？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-10-23 18:43:53
您必须停止事件传播，因为默认情况下，事件沿DOM树向上传播到其父对象。
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)">  close</i>
<h2>Element</h2>
</div>
</div>
Stack Overflow用户
发布于 2019-10-23 18:29:46
我认为您应该在CloseElement函数(https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation)中使用stopPropagation
它将使用OpenElement函数阻止事件冒泡到封闭的div。
Stack Overflow用户
发布于 2019-10-23 18:46:41
单击子元素也会触发对其父元素的单击。这是事件传播。
要避免这种情况，您必须手动停止传播。(参见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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58520725
复制相关文章
相似问题
腾讯云开发者
