Javascript - 仅在父点击时隐藏

Question

所以我有一个简单的标记:

<div id="edit_image" class="image_manipulator">
    <input type="text" />
</div>

这是javascript:

var image_manipulators= document.getElementsByClassName("image_manipulator");
for(var i = 0; i < image_manipulators.length; i++) {
    image_manipulators[i].onclick = function() {
        this.style.display = "none";
    };
}

这是 CSS:

.image_manipulator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1;
    display: none;
}
#edit_image input {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

这是 fiddle .

如果你点击半透明框然后你可以看到它正常消失但是如果你尝试在文本框上写东西然后半透明框仍然消失。我怎样才能阻止这种情况发生。 :)

P.S:不允许使用 jQUery。 :)

Answer 1

你可以试试 event.stopPropagation();

DEMO

html

<div id="edit_image" class="image_manipulator">
    <input id="textBox" type="text" />
</div>
<button id="showBox">Click me</button>

Java 脚本

var image_manipulators = document.getElementsByClassName("image_manipulator");
for (var i = 0; i < image_manipulators.length; i++) {
    image_manipulators[i].onclick = function () {
        this.style.display = "none";
    };
}

document.getElementById("showBox").onclick = function() {
    document.getElementById("edit_image").style.display = "block";
}

document.getElementById("textBox").onclick = function(e) {
    e.stopPropagation(); 
}