jQuery 阻止事件冒泡和阻止标签默认行为（如超链接）-CSDN博客

本文链接：https://blog.csdn.net/qq_37515466/article/details/84907342

最近在写JavaScript时，遇到一个问题，就是页面不该跳转的时候它跳转 :twisted: ，该跳转的时候它不动 :twisted: ，百度了很多方法，最终解决了问题 :D ，现整理如下 :arrow: ：

1.阻止事件冒泡
事件冒泡一般指向上冒泡，常见于点击（click）事件，我理解就是：我点里面的某一部分，你外面给我好好待着。代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试冒泡事件</title>
<script type="text/javascript" src="jqueryjs/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
$("span").click(function () {
$("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
});
$("#content").click(function () {
$("#msg").html($("#msg").html()+"<P>外层div元素被单击</P>");
});
$("body").click(function () {
$("#msg").html($("#msg").html()+"<P>body元素被单击</P>");
});
});
</script>
</head>
<body>

<div id="content" style="width: 200px;border: 1px solid red;">
外层div元素<br>
<span style="background: silver;border: 2px dashed yellow;">内层span元素</span><br>
外层div元素
</div>

<br>
<div id="msg"></div>
</body>
</html>

此时，未编写JavaScript代码来阻止事件冒泡，所以在点击内层span标签之后，三个点击事件（内层span，外层div，body）都会被执行（不会贴图片，麻烦你自己执行看效果咯 :D ）

现在，我们来添加event.stopPropagation(); 来阻止事件冒泡，代码修改如下（仅修改JavaScript的span部分）：
$("span").click(function (event) {
$("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
event.stopPropagation(); //阻止 span 的 click 事件冒泡，不让他冒泡到上层div和body
});
此时，点击内层sapn元素，外层div和body的点击事件将不会再触发，结果请自行验证。

2.阻止标签默认行为
标签默认行为正好相反，它一般指向下继承。常见于超链接a。我的理解是：当超链接a下面有很多span元素时，我希望的效果是点击某个元素，超链接a不跳转；点击其他元素，超链接跳转，可用于做点赞功能。实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试冒泡事件</title>
<script type="text/javascript" src="jqueryjs/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
$("span").click(function (event) {
$("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
event.stopPropagation(); //阻止 span 的 click 事件冒泡，不让他冒泡到上层div和body
});
$("#content").click(function () {
$("#msg").html($("#msg").html()+"<P>外层div元素被单击</P>");
});
$("body").click(function () {
$("#msg").html($("#msg").html()+"<P>body元素被单击</P>");
});
});
</script>
</head>
<body>
<a id="" style="border: 1px solid red;display: inline-block;" href="http://baidu.com">
<div id="content" style="width: 200px;border: 1px solid red;">
外层div元素<br>
<span style="background: silver;border: 2px dashed yellow;">内层span元素</span><br>
外层div元素
</div>
</a>
<br>
<div id="msg"></div>
</body>
</html>

此时，未添加阻止默认行为的JavaScript代码，无论你点击何处超链接都会跳转，而我希望的效果是，点击span超链接不跳转。
现在，我们添加 event.preventDefault();来阻止默认行为，添加一个超链接a点击事件，JavaScript代码如下：
$("#tiao").click(function (event) {
event.preventDefault(); //阻止默认行为
});
此时，点击内层sapn元素，超链接a将不会再跳转，结果请自行验证。

3.阻止冒泡事件和默认行为
这是我最终希望的结果：点击span 超链接a不跳转，点击其他部分超链接跳转。html代码和2的代码相同，修改JavaScript代码如下：
$("span").click(function (event) {
$("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
return false; //阻止事件冒泡和默认行为
});
此时，点击span 超链接a不跳转，点击其他部分超链接跳转。结果请自行验证。

写的不好，如有不足之处，还请指教。
谢谢阅读！