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(); 
}

Answer 2

点击输入时应取消默认行为，请参阅http://jsfiddle.net/XVS2C/8/

document.getElementById("test").onclick = function( e ){
if (!e)
  e = window.event;

//IE9 & Other Browsers
if (e.stopPropagation) {
  e.stopPropagation();
}
//IE8 and Lower
  else {
   e.cancelBubble = true;
  }
}

设置输入ID

<input type="text" id="test" />

Answer 3

尝试使用：

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

Javascript - 仅在父点击时隐藏

3 个答案: