最近看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", () => {
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(event);
});
-
event.currentTarget：在事件冒泡阶段中的当前DOM元素this === event.currentTarget； -
event.target：最初触发事件的DOM元素。这是注册事件时的对象，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。； -
event.delegateTarget：是委托管理事件的DOM元素，对于非授权的事件处理程序，直接连接到一个元素，event.delegateTarget 总是等价于event.currentTarget。
网友评论