点击页面任何地方，将div隐藏，除了指定位置外

最新推荐文章于 2020-12-29 08:44:39 发布

原创最新推荐文章于 2020-12-29 08:44:39 发布 · 474 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #HTML #ViewUI

web类专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的功能，即当用户点击页面上除指定ID为'aa'的DIV之外的任何区域时，该DIV会自动隐藏。示例代码展示了如何设置此功能，并在HTML页面中进行了演示。

点击页面任何地方，将div隐藏，除了指定位置外。下面代码的意思是：div的id为aa，点击除了aa以外的任何地方，都可以使aa隐藏。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{border:1px solid #000; width:200px; height:200px; margin:10px; float:left}
#aa{background-color:#00FFFF}
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="aa">
  <p>我是aa</p>
  <table width="100%" border="0" bgcolor="#0000FF">
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
      <th scope="col">q</th>
      <th scope="col">a</th>
    </tr>
    <tr>
      <td>q</td>
      <td>e</td>
      <td>w</td>
      <td>w</td>
      <td>w</td>
    </tr>
    <tr>
      <td>w</td>
      <td>w</td>
      <td>w</td>
      <td>3</td>
      <td>1</td>
    </tr>
  </table>
  <p>我是aa</p>
</div>
<div id="d4">d3</div>
</body>
</html>
<script type="text/javascript">
document.onclick = hideAA;
function hideAA(e){
	var src = e?e.target:event.srcElement;

	do{
		if(src.id =="aa") return;
		src = src.parentNode;
	}while(src.parentNode)
	document.getElementById("aa").style.display = "none";
}
</script>