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

Answer 2

尝试使用这样的：

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

Answer 3

您应该取消默认行为时，点击输入，看到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" />