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

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

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

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

1.1 界面效果-html

界面显示

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

2. box1-click2-阻止默认操作

3. box1-click3-阻止事件冒泡

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

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. = () => 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. = (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层次。也就是说，我们可以为整个页面指定一个事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。利用事件委托方式，即使新增加的元素也能触发该事件。

(1)事件委托方式-jquery

html：

click1

click2

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。

作者：家里有颗核桃树

链接：https://www.jianshu.com/p/185d72b1aa20