jQuery阻止事件冒泡

jQuery 提供了两种方式来阻止事件冒泡。

方式一： event.stopPropagation();

$("#div1").mousedown(function(event) {
    event.stopPropagation();
});

方式二：return false;

$("#div1").mousedown(function(event) {
    return false;
});

二者区别：
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身；
return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery-3.2.1.min.js"></script>
    <script src="./script.js"></script>
</head>

<body>
    <div id="dTest">
        <a id="aTest" href="http://www.baidu.com/">百度</a>
    </div>
</body>

</html>

情形1：JS代码

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析：当点击“百度”时，会先后弹出’abc-By-a’及’abc-By-div’两个对话框，然后会跳转到百度；

情形2：JS代码
调用事件对象的 .preventDefault() 方法可以阻止事件的默认行为：

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
        evt.preventDefault();
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析：当点击“百度”时，会先后弹出’abc-By-a’及’abc-By-div’两个对话框，然后不会跳转到百度；（因为a标签的默认行为被阻止了）
【jQuery 还有另外一个方法 .stopImmediatePropagation() 调用后事件冒泡被阻止同时该元素上后面绑定的事件处理程序也不会执行了】

情形3：JS代码
调用事件对象的 .stopPropagation() 方法可以阻止事件冒泡：

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
        evt.stopPropagation();
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析：当点击“百度”时，会先后弹出’abc-By-a’一个对话框，然后会跳转到百度；（因为a标签冒泡被阻止了）

情形4：JS代码
在事件处理程序中直接返回 false 可以同时取消冒泡和阻止默认行为：

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
        return false;
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析：当点击“百度”时，会弹出’abc-By-a’一个对话框，不会弹出’abc-By-div’对话框，也不会跳转到百度；（因为a标签的默认行为被阻止了，因为a标签冒泡也被阻止了）