Javascript -仅在父级单击时隐藏
Javascript -仅在父级单击时隐藏
提问于 2014-03-29 17:39:18
所以我有一个简单的标记：
<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;
}这是小提琴。
如果你点击半透明框，你可以看到它消失正常，但是如果你试图在文本框上写一些东西，那么半透明框仍然消失。我怎么才能阻止这一切的发生。:)
不允许使用jQUery。:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-03-29 17:43:29
您可以尝试event.stopPropagation()；
演示
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();
}Stack Overflow用户
发布于 2014-03-29 17:48:26
单击“输入”时应取消默认行为，请参阅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" />Stack Overflow用户
发布于 2014-03-29 17:42:21
试着使用以下方法：
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(); }; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22734474
复制相关文章
相似问题
腾讯云开发者
