html 点击div 内部不隐藏，点击div外部则隐藏

最新推荐文章于 2022-08-09 12:14:11 发布

xeral

最新推荐文章于 2022-08-09 12:14:11 发布

阅读量2k

点赞数 2

分类专栏： Javascript学习文章标签： div html function xhtml null jquery

本文链接：https://blog.csdn.net/xeral/article/details/8012594

版权

Javascript学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现效果：点击div 内部不隐藏，点击div外部则隐藏

网上找到的办法基本上是：

实现该div的click事件，并阻止冒泡。

实现document的click事件，隐藏该div。

这方法，有个bug，如果点击的元素的click,也阻止了冒泡，则无法实现效果。

本淫想到另一办法。使用focusin,focusout来实现。（貌似只有IE支持onfocusout，onfocusin)。查阅有关资料：onfocusout,onfocusin可冒泡。onfocus,onblur不支持冒泡。

设置div可获得焦点,添加属性 tabindex = "-1"。

使用jquery，不管浏览器的差异。

var divNode = $(该div)；

//设置设div获得焦点

divNode.focus();

var t = 0;

divNode.bind("focusout", function() {
    t = setTimeout(function() {
           divNode.hide();
    }, 0);
    return false;
});

divNode.bind("focusin", function() {
    if (t != null) {
          clearTimeout(t);
     }
     return false;
});

这种方法bug是，tab切焦，会触发隐藏，单击滚动条不会隐藏。

浏览表现存在差异。

IE下点击地址栏，搜索栏，会触发隐藏。点该div的内部没有焦点的元素一样会触发focusout。而chrome则不会。（FF没有测试，本淫恶心FF！！！）

测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

</head>
<body >
<div> <span id="test1btn"/>显示方法1div</span><span id="test2btn"/>显示方法2div</span></div>

<div id='test1' style="display:none;  background:rgb(0,153,255)">
<div style="width:100px; height:200px; background-color:rgb(204,204,204)">我是方法1内部元素</div>
</div>


<div id='test2' tabIndex="-1" style="display:none; background:rgb(153,153,153)">
<div style="width:100px; height:200px; background-color:rgb(0,153,255)">我是方法2内部元素</div>
</div>
<div style="width:100px; height:200px; background-color:rgb(255,204,153)" id="noBubble">我阻止了click冒泡,点我试试看。</div>
<script type="text/javascript">
$(function(){
	var divNode2 = $("#test2");
	var divNode1 = $("#test1");
	var t = null;	
	$("#test2btn").click(function() {
		divNode2.css("display", "block");
		//这里用jq的focus不能得到焦点。为什么？我想知道，谁能告诉我。难道不支持div获得焦点？
		//divNode2.focus();
		//js原生态可以使div获得焦点。
		document.getElementById("test2").focus();

	});
	divNode2.bind("focusout", function() {
		t = setTimeout(function() {
			divNode2.hide();
		}, 0);
		return false;
	});
	
	divNode2.bind("focusin", function() {
		if (t != null) {
			clearTimeout(t);	
		}
		return false;
	});
	$("#test1btn").click(function() {
		divNode1.show();
		return false;
	});
	divNode1.click(function() {
		return false;
	});
	$(document).click(function(){
		divNode1.hide();
	});
	$("#noBubble").click(function(){return false;});
});
</script>
</body>
</html>

走过，路过，过来看看，点评点评，学习学习！

xeral

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 点击div 内部不隐藏，点击div外部则隐藏

实现效果：点击div 内部不隐藏，点击div外部则隐藏网上找到的办法基本上是：实现该div的click事件，并阻止冒泡。实现document的click事件，隐藏该div。这方法，有个bug，如果点击的元素的click,也阻止了冒泡，则无法实现效果。本淫想到另一办法。使用focusin,focusout来实现。（貌似只有IE支持onfocusout，onfocusi
复制链接

扫一扫

专栏目录