div.onblur的两个解决方法

最新推荐文章于 2024-10-08 19:10:07 发布

原创最新推荐文章于 2024-10-08 19:10:07 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #button #input #null

JavaScript 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

本文介绍了两种使用JavaScript控制DIV元素显示与隐藏的方法。一种是通过监听文档点击事件并检查目标元素来控制显示状态；另一种是利用tabindex属性和onblur事件实现。这两种方法各有优缺点，例如第二种方法简单易实现但会导致DIV周围出现虚线框。

1.document.onclick

<div id="div1" onclick="test()">fff</div>
<div id="div2" style="display:none;width:200px;height:120px;"><input type="button" value="hide"/></div>
<script type="text/javascript">
function test () {
document.getElementById("div2").style.display="";
document.getElementById("div2").focus();
}

function hide (event) {
event=(event==null)?window.event:event;
var div2=document.getElementById("div2");
var div1=document.getElementById("div1");
var target_test=event.target?event.target:event.srcElement;
(target_test!=div2) && (target_test!=div1)?div2.style.display='none':null;
}
document.onclick=hide;
</script>
虽然没有用onblur，但是实现的效果是同样的

2.tabindex="0"

<div id="div3" onclick="test()">fff33</div>
<div id="div4" tabindex="0" onblur="hide()" style="display:none;width:200px;height:120px;"><input type="button" value="hide"/></div>
<script type="text/javascript">
function test () {
document.getElementById("div4").style.display="";
document.getElementById("div4").focus();
}

function hide () {
var div2=document.getElementById("div4");
div2.style.display='none';
}
</script>

这个实现的比较简单，但是不好的地方是div有一个虚线框，不晓得有没有办法去掉？