javascript/jquery-阻止事件冒泡和事件默认操作几种方式

最近看vue的事件处理的时候，突然想到了平时写代码的时候经常用return false来阻止默认操作和事件冒泡，都没有用event对象提供的方法。网上的文章也大多有出入，就只好自己写了，便于后面查阅。

说明：本文通过对元素的事件属性、事件监听器（addEventListener）和jquery 的事件绑定on来为元素绑定事件，通过return false、event.preventDefault()和event.stopPropagation()来阻止事件默认操作和事件冒泡。

1. 阻止事件冒泡和事件默认操作几种方式-demo

1.1 界面效果-html

界面显示

<div id="box1">
    <ol>
        <li>
            <a id="box1-a1" href="https://www.baidu.com" target="_blank">box1-click1-阻止默认操作和事件冒泡</a>
        </li>
        <li>
            <a id="box1-a2" href="https://www.baidu.com" target="_blank">box1-click2-阻止默认操作</a>
        </li>
        <li>
            <a id="box1-a3" href="https://www.baidu.com" target="_blank">box1-click3-阻止事件冒泡</a>
        </li>
        <li>
            <a id="box1-a4" href="https://www.baidu.com" target="_blank">box1-click4-默认操作和事件冒泡</a>
        </li>
    </ol>
</div>

1.2 事件绑定-js

一些相关的变量声明：

let box1 = document.getElementById("box1");
let box1A1 = document.getElementById("box1-a1");
let box1A2 = document.getElementById("box1-a2");
let box1A3 = document.getElementById("box1-a3");
let box1A4 = document.getElementById("box1-a4");

box1.onclick = () => console.log("box1-被点击了");

（1）box1-click1-阻止默认操作和事件冒泡

使用addEventListener绑定事件：

box1A1.addEventListener("click", event => {
    console.log("box1-click1-阻止默认操作和事件冒泡 被点击了");
    event.preventDefault();
    event.stopPropagation();
});

使用jquery.on方法绑定事件：

$(box1A1).on("click", event => {
    console.log("box1-click1-阻止默认操作和事件冒泡 被点击了");
    // event.preventDefault();
    // event.stopPropagation();
    return false; // 【只能return false，return otherValue不行】
});

注：使用addEventListener绑定事件、事件属性和使用jquery.on方法绑定事件，事件处理函数内部使用event.preventDefault(); event.stopPropagation();都能阻止默认操作和事件冒泡。
------如果使用jquery还可以使用return false;来达到同样的效果。

（2）box1-click2-阻止默认操作

使用addEventListener绑定事件：

box1A2.addEventListener("click", event => {
    console.log("box1-click2-阻止默认操作 被点击了");
    event.preventDefault();
});

使用事件属性：

box1A2.onclick = (event) => {
    console.log("box1-click2-阻止默认操作 被点击了");
    // event.preventDefault();
    return false; // 能阻止默认操作，但是不能阻止事件冒泡【只能return false，return otherValue不行】
};

注：使用addEventListener绑定事件、事件属性和使用jquery.on方法绑定事件，事件处理函数内部使用event.preventDefault();都能阻止默认操作。
------如果使用事件属性还可以使用return false;来达到同样的效果。

（3）box1-click3-阻止事件冒泡

使用addEventListener绑定事件：

box1A3.addEventListener("click", event => {
    console.log("box1-click3-阻止事件冒泡 被点击了");
    event.stopPropagation();
});

注：使用addEventListener绑定事件、事件属性和使用jquery.on方法绑定事件，事件处理函数内部使用event.stopPropagation();都能阻止事件冒泡。

（4）box1-click4-默认操作和事件冒泡

使用addEventListener绑定事件：

box1A4.addEventListener("click", (event) => {
    console.log("box1-click4-默认操作和事件冒泡 被点击了");
});

2. 结论

event.preventDefault();阻止默认操作；
event.stopPropagation();阻止事件冒泡；
addEventListener绑定事件，事件处理函数里的return false;不能阻止默认操作和事件冒泡；
jquery.on绑定事件，事件处理函数里的return false;阻止默认操作和事件冒泡；
元素事件属性里的return false;只能阻止默认操作。

3. 拓展

目前所有事件都采用的是沿着DOM树向上冒泡的的方式，可以将addEventListener的最后一个参数设为true，就可以采用事件捕获方式。
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。利用事件委托方式，即使新增加的元素也能触发该事件。

（1）事件委托方式-jquery

html：

<div class="div1">
    <a class="a1" href="###">click1</a>
</div>
<div class="div2">
    <a class="a2" href="###">click2</a>
</div>

js:

$("div").on("click", "a", function (event) {
    console.log("a被点击了");
    console.log(event);
});
$("div").on("click", function (event) {
    console.log("div被点击了");
    console.log(event);
});

event.currentTarget：在事件冒泡阶段中的当前DOM元素this === event.currentTarget；
event.target：最初触发事件的DOM元素。这是注册事件时的对象，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。；
event.delegateTarget：是委托管理事件的DOM元素（如本实例中的div）。对于非授权的事件处理程序，直接连接到一个元素，event.delegateTarget 总是等价于event.currentTarget。