使用javascript将div框添加到DOM (html主体)后关闭
使用javascript将div框添加到DOM (html主体)后关闭
提问于 2014-02-08 22:51:52
我希望能得到一些帮助。我在下面设置了一个JSfiddle：
http://jsfiddle.net/y7mEY/102/
当我点击输入框之外的任何地方时，我都会看到一个灰色的div框(在它里面有搜索选项)。
我不想加载jquery，因此将所有内容都保存在javascript中。
有什么帮助吗？
代码如下：
HTML
<div id = "searchHousing">
<input type="text" name="value" id="fillIn">
</div>CSS
.searchBox {
position: absolute;
font-family:Arial;
font-size: 10pt;
color:black;
height: 200px;
width: 200px;
padding-left: 3px;
padding-top: 1px;
border: 1px solid white;
background-color: grey;
}
#fillIn {
width: 200px;
height: 28px;
border-radius: 4px;
font-size: 16px;
margin-bottom: 2px;
#searchHousing {
float: left;
}Javascript：
var inputSearch = document.getElementById('fillIn');
inputSearch.onclick = function() {
var searchBox = document.createElement("div");
searchBox.className = "searchBox";
document.getElementById('searchHousing').appendChild(searchBox);
};谢谢你，尤恩
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-02-08 22:58:25
我建议不要在点击事件上创建新的'div‘。当多次单击输入框时，这将导致多个"searchBox“div。不用说，这将需要清理工作，以消除重复的div。
相反，在HTML中创建searchBox div并切换它在javascript上的可见性。
更新的JSFiddle：http://jsfiddle.net/y7mEY/109/
[
var inputSearch = document.getElementById('fillIn');
inputSearch.onclick = function() {
document.getElementById('searchBox').style.display = 'block';
};
inputSearch.onblur = function() {
document.getElementById('searchBox').style.display = 'none';
};]
Stack Overflow用户
发布于 2014-02-08 23:03:37
如果要使用当前的方法，只需使用"onblur“事件在元素失去焦点时删除该元素。
inputSearch.onblur = function() {
document.getElementById('searchHousing').removeChild(document.getElementsByClassName("searchBox")[0]);
}但是正如CVG所提到的，创建/删除活动元素是一个相当糟糕的主意。
Stack Overflow用户
发布于 2014-02-08 23:03:58
您将一直创建div元素，这一点都不好。您可以按照切换display属性的方式进行操作。
为了确保，如果您希望searchBox保持打开，并且只有在单击searchBox 和填充元素之外时才能关闭，那么您只需跟踪单击事件，只有在同时单击外部时才能切换显示。只要不输入输入，其他方法就会关闭它，如果您想在div中放置工具或其他东西，那就没用了。
document.addEventListener('click', function(e) {
if(e.target.id != "searchBox" && e.target.id != "fillIn")
document.getElementById("searchBox").style.display="none";
});完整演示：JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21652797
复制相关文章
相似问题
腾讯云开发者
