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

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

1.阻止事件冒泡
事件冒泡一般指向上冒泡，常见于点击（click）事件，我理解就是：我点里面的某一部分，你外面给我好好待着。代码示例如下：

外层div元素

内层span元素

外层div元素

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

现在，我们来添加event.stopPropagation(); 来阻止事件冒泡，代码修改如下（仅修改JavaScript的span部分）：
$("span").click(function (event) {
$("#msg").html($("#msg").html()+"

内层span元素被单击

");
event.stopPropagation(); //阻止 span 的 click 事件 冒泡，不让他冒泡到上层div和body
});
此时，点击内层sapn元素，外层div和body的点击事件将不会再触发，结果请自行验证。

2.阻止标签默认行为
标签默认行为正好相反，它一般指向下继承。常见于超链接a。我的理解是：当超链接a下面有很多span元素时，我希望的效果是点击某个元素，超链接a不跳转；点击其他元素，超链接跳转，可用于做点赞功能。实例代码如下：

外层div元素

内层span元素

外层div元素

此时，未添加阻止默认行为的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()+"

内层span元素被单击

");
return false; //阻止事件冒泡和默认行为
});
此时，点击span 超链接a不跳转，点击其他部分超链接跳转。结果请自行验证。

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