如何隐藏
问题描述:
我想隐藏其子elements.say的事件的内容股利该div的子元素(在Java脚本)的事件的内容一个div,如何隐藏
让有用户名和密码字段中DIV,它最初将最小化,用户点击打开的DIV那么如果DIV以外的任何地方的用户点击必须关闭mydiv
<body>
<div id="mydiv" onblur="alert('hi');" tabindex="1" style="border: 1px solid black;">click off me to activate onblur
<br/>
username: <input type="text" name="username" onblur="alert('hi');" tabindex="1" />
<br/>
Password: <input type="text" name="password" />
</div>
</body>
(见JS小提琴:http://jsfiddle.net/vC7Rb/1/)
我试图把的onblur为既div和文本字段,但这需要合作从我需要检查是否任何元素仍然有焦点,然后只隐藏div.thats似乎太多,所以有任何简单的方法来做到这一点。
我想在纯JavaScript代码中实现它,它应该在所有浏览器(IE,firefox,chrome)中兼容。
答
一般而言,您正在询问如何检测元素外部的点击。那个问题很好地被问及并回答了here。另外,下面是一个fiddle,展示了如何处理隐藏和重用用例的好处。我真正添加的唯一的事情是显示,无论您使用哪个按钮/方法来重新显示用户名/密码div,都需要使用相同类型的event.stopPropagation()以避免重新隐藏您尝试显示的内容。
HTML:
<button onclick="document.getElementById('loginContainer').style.display='block';event.stopPropagation();">Show Login</button>
<div id="loginContainer" onclick="containerClicked(event)" style="border:1px solid black">
<div><span>User Name:</span><input id="username" /></div>
<div><span>Password:</span><input id="password" type="password"/></div>
</div>
<div style="border:1px solid red">Some other div on document</div>
JS:
document.onclick = function(){
console.warn('doc clicked');
document.getElementById('loginContainer').style.display = 'none';
}
function containerClicked(ev)
{
console.warn('clicked');
ev.stopPropagation();
}
对不起,如果我的问题是不明确的,无论用户是否填写文本字段与否,如果用户点击的div以外的任何地方,应关闭DIV( “mydiv”)。 – 2013-03-13 17:08:33
现在我改变了答案,我明白了这个问题。 – purgatory101 2013-03-13 18:40:39