JS阻止事件冒泡

事件冒泡：事件开始是由具体的元素接收，然后逐级向上传播到不具体的节点。

添加以下代码

<div class="content">
    <a href="http://www.baidu.com" target="_blank">hhhh</a>
</div>

添加CSS

.content{height: 200px;width: 600px;margin: 0 auto;background-color: red}
.content a{display: block;height: 50%;width: 50%;background-color: green;}

1、event.preventDefault()

$(".content a").click(function(event) {
    event.preventDefault();
});
$(".content").click(function() {
    alert("1");
});

取消事件默认事件(弹出提示框，不会有跳转)

2、event.Propagation()

$(".content a").click(function(event) {
    event.stopPropagation();
});
$(".content").click(function() {
    alert("1");
});

阻止事件的进一步冒泡或者捕获(会跳转链接，不会跳出提示框)

3、event.ImmediatePropagation()

阻止事件的进一步冒泡或者捕获，同时阻止任何事件处理程序被调用。

4、return false

$(".content a").click(function(event) {
    return false;
});

等同于：

$(".content a").click(function(event) {
    event.stopPropagation();
    event.preventDefault();
});

阻止事件冒泡的同时也会阻止默认事件

本人正在学习和摸索中，如有错误，欢迎指正！