Question

单击按钮时我有一个模态显示，当用户点击内容区域外时我想关闭它。现在我有

<div id="modal" onclick="hideModal(this.id)">
    <div id="modal_content">
        <h1>Update Weight</h1>
        <form action="">
            <input type="text" name="weight" maxlength=4/> lbs
            <input type="Submit" value="Update"/>
        </form>
    </div> <!-- modal_content -->
</div> <!-- modal -->

我的简单javascript函数是

function hideModal(selected) {
modal = document.getElementById("modal");
modal.style.display = "none";
}

这个问题是即使点击了任何父元素，模态也会被隐藏。

Answer 1

使用event.stopPropagation()使事件不会向下移动到其他事件侦听器。

var modal = document.getElementById("modal");
document.body.addEventListener("click", function () {
  modal.classList.remove("active");
})

modal.addEventListener("click", function (e) {
  e.stopPropagation()
});

#modal {
  display :none;
}

#modal.active {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100px; height: 100px; background-color: yellow;
}

<h1>Hello</h1>
<div id="modal" class="active">Hi</div>

Answer 2

您可以这样做：

<div id="modal" onclick="hideModal(event)">
    ....
</div>


function hideModal(event) {
    if(event.target.id == "modal"){
        event.target.style.display = "none";
    }
}

仅在javascript中的父元素上使用onclick？

2 个答案: