Javascript点击其他任意地方隐藏关闭DIV实例

最新推荐文章于 2023-06-08 10:21:24 发布

转载最新推荐文章于 2023-06-08 10:21:24 发布 · 1.2k 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：https://www.jb51.net/article/87048.htm

java web 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一段JavaScript代码，实现了当点击input元素时显示一个div层，再次点击页面上除input和div以外的区域时，div层将被隐藏。代码通过自定义函数e()获取DOM元素，使用onclick事件监听器实现交互逻辑，并利用stopBubble()函数阻止事件冒泡。

代码如下，实现了点击input显示一个div层，当点击除input和div以外的地方的时候，隐藏div的功能。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>点击其它地方关闭DIV</title>

</head>

<body>

<input type="text" value="" id="tf"/>

<div style="width:400px; height:200px;border:1px solid #000;display:none" id="con">

<p>1111</p>

<p><span>2222</span></p>

<p><a href="#">3333</a></p>

</div>

<script>

function e(obj){return document.getElementById(obj)}

e('tf').onclick=function(event){

e('con').style.display='block';

stopBubble(event);

document.onclick=function(){

e('con').style.display='none';

　　　　　　　document.onclick=null;　

}

}

e('con').onclick=function(event){

//只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数

stopBubble(event);

}

//阻止冒泡函数

function stopBubble(e){

if(e && e.stopPropagation){

e.stopPropagation(); //w3c

}else{

window.event.cancelBubble=true; //IE

}

}

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。