[收藏]阻止子元素的点击事件

问题描述:
今天在调试页面的时候遇到一个奇怪的现象,在一个父元素上面定义了一个点击事件,在父元素下面是一个一个的li标签,这上面没有任何点击事件。现象是当点击其中一个li标签时会发生一些动作。

这个问题困惑了我好久,我对代码翻了好几遍,最后才确定是,点击子元素时也将会触发父元素的事件。当时我把这种现象是在父元素上定义点击事件时,实际上是在这个区域中都定义了点击事件,所以当点击子元素时,实际上也是在点击父元素。

但是更科学的解释是:如果在点击子元素时,如果子元素中没有点击事件,那么该点击事件将自动冒泡到父元素,直到能找到一个可以处理点击事件的函数。

那这种解释可以带来的好处是,可以有方法来屏蔽这种现象,那就是阻止点击事件的冒泡。对于jQuery而言,就是stopPropagation().对于下面的代码而言,大家可以尝试下,如果没有stopPropagation和有stopPropagation之间的差别。

代码如下:

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
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<link rel="stylesheet" type="text/css" href="">
<script src="./jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function() {
$("#maindiv").click(function(event) {
if($(this).children('ul').css("display") == "none")
$(this).children('ul').css("display","block");
else
$(this).children('ul').css('display',"none");
});
//阻止向上冒泡
$("#maindiv > ul").click(function(event) {
event.stopPropagation();
});
});
</script>
<title>测试如何屏蔽子元素的事件</title>
<body>
<div id="maindiv">
<button>click me</button>
<ul style="display:none">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
</body>
</html>
Mr.Naas wechat
欢迎关注本人公众号