如何隐藏

我想隐藏其子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）中兼容。

来源

2013-03-13 Lohith MV

一般而言，您正在询问如何检测元素外部的点击。那个问题很好地被问及并回答了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(); 
}

来源

2013-03-13 16:45:47 purgatory101

对不起，如果我的问题是不明确的，无论用户是否填写文本字段与否，如果用户点击的div以外的任何地方，应关闭DIV（ “mydiv”）。 – 2013-03-13 17:08:33

现在我改变了答案，我明白了这个问题。 – purgatory101 2013-03-13 18:40:39

回答

相关问题