div.onblur的两个解决方法

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #button #function #null

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何利用JavaScript通过两种不同方式实现弹窗的显示与隐藏：一是监听整个文档的点击事件，二是利用tabindex属性配合onblur事件。文章详细展示了如何编写相关JavaScript函数，并讨论了每种方法的特点。

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有一个虚线框，不晓得有没有办法去掉？