event.stopPropagation 和 event.preventDefault 有什么区别？

stopPropagation 防止在捕获和冒泡阶段进一步传播当前事件。

preventDefault 阻止浏览器对该事件执行默认操作。

例子

防止默认

$("#but").click(function (event) { event.preventDefault() }) $("#foo").click(function () { alert("父点击事件触发！") })

停止传播

$("#but").click(function (event) { event.stopPropagation() }) $("#foo").click(function () { alert("父点击事件触发！") })

使用 stopPropagation，只有 button 的点击处理程序 被调用，而 div 的点击处理程序 永远不会触发。

就像您使用 preventDefault 一样，只有浏览器的默认操作会停止，但 div 的点击处理程序仍然会触发。

下面是一些来自 MDN 的关于 DOM 事件属性和方法的文档：

event.cancelBubble

event.preventDefault()

event.returnValue

event.stopPropagation()

对于 IE9 和 FF，您可以只使用 preventDefault 和 stopPropagation。

要支持 IE8 及更低版本，请将 stopPropagation 替换为 cancelBubble 并将 preventDefault 替换为 returnValue

---

术语

从 quirksmode.org：

事件捕获 当您使用事件捕获 | | ---------------| |----------------- |元素1 | | | | ------------| |----------- | | |元素2 \ / | | | ------------------------------------- | |事件捕捉 | ------------------------------------------------ element1 的事件处理器最先触发， element2 的事件处理器最后触发.事件冒泡 当你使用事件冒泡 / \ ---------------| |----------------- |元素1 | | | | ------------| |----------- | | |元素2 | | | | | ------------------------------------- | |事件冒泡 | ------------------------------------------------ element2 的事件处理器最先触发，element1 的事件处理器最后触发.在 W3C 事件模型中发生的任何事件都会首先被捕获，直到它到达目标元素，然后再次冒泡。 | | / \ -----------------| |--| |----------------- |元素1 | | | | | | -------------| |--| |----------- | | |元素2 \ / | | | | | -------------------------------- | | W3C 事件模型 | ------------------------------------------

界面

从 w3.org，对于事件捕获：

如果捕获的 EventListener 希望阻止对事件的进一步处理，它可以调用 Event 接口的 stopPropagation 方法。这将阻止事件的进一步分派，尽管在同一层次结构级别注册的其他 EventListener 仍将接收该事件。一旦调用了事件的 stopPropagation 方法，对该方法的进一步调用就不会产生额外的效果。如果不存在其他捕获器且未调用 stopPropagation，则该事件会在目标本身上触发相应的 EventListener。

对于事件冒泡：

任何事件处理程序都可以选择通过调用 Event 接口的 stopPropagation 方法来阻止进一步的事件传播。如果任何 EventListener 调用此方法，则当前 EventTarget 上的所有其他 EventListener 都将被触发，但在该级别将停止冒泡。只需一次调用 stopPropagation 即可防止进一步冒泡。

对于事件取消：

取消是通过调用事件的 preventDefault 方法完成的。如果一个或多个 EventListener 在事件流的任何阶段调用 preventDefault，则默认操作将被取消。

例子

在以下示例中，单击 Web 浏览器中的超链接会触发事件流（执行事件侦听器）和事件目标的默认操作（打开新选项卡）。

HTML：

<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>

JavaScript：

var el = document.getElementById("c");

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}

function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}

// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

Example 1：它导致输出

DIV event capture
A event capture
A event bubbling
DIV event bubbling

Example 2：将 stopPropagation() 添加到函数中

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

结果输出

DIV event capture

事件侦听器阻止了事件的进一步向下和向上传播。但是，它并没有阻止默认操作（新标签打开）。

Example 3：将 stopPropagation() 添加到函数中

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

或功能

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

结果输出

DIV event capture
A event capture
A event bubbling

这是因为两个事件侦听器都注册在同一个事件目标上。事件侦听器阻止了事件的进一步向上传播。但是，他们并没有阻止默认操作（新标签打开）。

Example 4：例如将 preventDefault() 添加到任何函数

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

防止打开新标签。

---

返回假；

return false; 在您调用它时会做 3 件不同的事情：

event.preventDefault() - 它停止浏览器的默认行为。 event.stopPropagation() - 它防止事件传播（或“冒泡”）DOM。停止回调执行并在调用时立即返回。

请注意，此行为不同于普通（非 jQuery）事件处理程序，其中值得注意的是，return false 不会阻止事件冒泡。

防止默认（）；

preventDefault(); 做了一件事：它停止浏览器的默认行为。

什么时候使用它们？

我们知道它们的作用，但何时使用它们？简单地说，这取决于你想要完成什么。如果您想“只是”阻止默认浏览器行为，请使用 preventDefault();。使用返回假；当您想要阻止默认浏览器行为并阻止事件传播 DOM 时。在大多数情况下，您会使用 return false；你真正想要的是preventDefault()。

例子：

让我们尝试通过示例来理解：

我们将看到纯 JAVASCRIPT 示例

示例 1：

---