Home / Questions / 48512
Accepted
Phi
Asked: 2020-02-09 18:03:41 +0800 CST 2020-02-09 18:03:41 +0800 CST

JavaScript 中的 return false PreventDefault、stopPropagation 和 stopImmediatePropagation 有什么区别？

  • 772

查看一些 JavaScript 代码，我发现了一个特殊性，有时它被使用preventDefault()，但在其他一些return false;中，例如：

功能return false;：

function() {
  return false;
}

功能preventDefault();：

function(e) {
    e.preventDefault();
}

一个更具体的例子如下：

$('a').click(function () {
    return false;
});
//----------------------------
$('a').click(function (e) {
    e.preventDefault();
});

更新

Álvaro的回答澄清了一些疑虑并产生了其他疑虑，例如，他提到：

在 jQuery 中，return false它相当于做preventDefault和stopPropagation

你的例子很容易理解，但继续我的研究，我看到另外两个具有相似目的的事件，第一个是stopPropagation，另一个是stopImmediatePropagation。stopPropagation到目前为止我已经理解了，但是delstopImmediatePropagation呢？

到目前为止已经回答的例子对我理解它是如何工作的有很大帮助，但是，现在我不清楚什么时候可以使用stopImmediatePropagation.

比如专注于jQuery，执行下面的代码会是什么结果？

$('a').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
});

鉴于上述情况，我有几个问题：

  1. 使用preventDefault()和 和有什么不一样return false;？（疑问已解决）
  2. 何时使用其中一种？（疑问已解决）
  3. 是否最好倾向于上述两者之一？（疑问已解决）
  4. 它stopImmediatePropagation有什么用，使用它时我有什么优势？
  5. stopPropagation使用它们或一起使用它们有什么区别stopImmediatePropagation？
javascript

3 Answers

  1. Best Answer

    使用preventDefault()和 和有什么不一样return false;？

    一些区别：

    • 功能：preventDefault顾名思义，阻止与该事件关联的默认操作；虽然它return false返回值 false （有时可能会阻止默认操作，但这不是它的主要目标）。
    • Scope：preventDefault它是一个事件方法，也就是说，它是一个对象内部的一个函数，没有它的事件它就不起作用（你不能只是这样做preventDefault()，它必须是evento.preventDefault()）；而它return是一个返回值的语句，可以随时调用。
    • 定位preventDefault-可以随时调用事件处理程序内部preventDefault，而return false只能在最后完成。这可能看起来微不足道，但如果事件处理程序中间出现一些 JS 错误，它可能会产生不同的结果。

    尽管在某些情况下它们的工作方式可能相似，但情况并非总是如此。例如：在纯 JavaScript 中，如果你有一个带有aand do的链接preventDefault()，页面将不会重定向，因为默认操作被阻止。如果您选择return false是，则会执行重定向。

    document.querySelector("#enlace1").addEventListener("click", function(e) {
  e.preventDefault();
});

document.querySelector("#enlace2").addEventListener("click", function(e) {
  return false;
});
    <a href="http://es.stackoverflow.com" id="enlace1">Yo no redirecciono</a>...
<a href="http://es.stackoverflow.com" id="enlace2">pero yo sí</a>

    但情况并非总是如此：如果您使用return falseinlineonclick而不是using ，则将避免默认事件（例如使用表单或链接）。addEventListener

    那是纯 JavaScript，在 jQuery 中，奇怪的是它们的工作方式有点不同。在 jQuery 中，return false它相当于做preventDefaultandstopPropagation。换句话说，不仅可以避免默认操作，而且还可以避免将事件传播到元素的祖先。

    一个例子：

    $("div").on("click", function() {
  console.log("Evento click del div");
});

$("#enlace1").on("click", function(e) {
  e.preventDefault();
  console.log("Evento click del enlace");
});

$("#enlace2").on("click", function(e) {
  console.log("Evento click del enlace");
  return false;
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
  <a href="http://www.google.com" id="enlace1">Pulsándome a mí, también se ejecutará la acción del div padre</a>
  <br/>
  <a href="http://www.google.com" id="enlace2">...pero conmigo no</a>
</div>

    在英文的 StackOverflow 上，有一个问题用 jQuery更深入地探讨了这个主题。

    何时使用其中一种？

    像所有事情一样：这将取决于上下文和您想要做什么。尤其是如果您使用 jQuery，return false它所做的不仅仅是阻止默认操作。

    是否最好倾向于上述两者之一？

    正如我上面所说，这将取决于上下文以及您使用的是纯 JavaScript 还是像 jQuery 这样的库。我个人喜欢使用preventDefault，但这是我自己的选择。

    您还应该考虑其他因素，例如我在定位方面的差异：如果事件处理程序中发生错误，return false它将永远不会运行。我知道这并不是真的那么严重（你有一个错误，这比没有达到更严重return），而是一个需要考虑的细节。

    它stopImmediatePropagation有什么用，使用它时我有什么优势？

    当多个事件处理程序附加到一个元素时，它们会按照它们附加的顺序执行。stopImmediatePropagation导致后续处理程序调用停止。

    需要注意的是，它不仅阻止与该元素关联的其余事件处理程序执行，而且还调用stopPropagation, pot 来阻止调用祖先的事件处理程序。

    stopPropagation使用它们或一起使用它们有什么区别stopImmediatePropagation？

    stopPropagation停止将事件传播到元素的祖先（停止“气泡”效果）。例如，在上面的脚本中，当return false在 jQuery 中完成（并因此执行stopPropagation）时，只有 del 事件处理程序被执行，a而不是 del事件处理程序div。

    但是如果元素有更多的事件处理程序，stopPropagation它不会停止它们，它只会停止传播到祖先。使用stopImmediatePropagation，它会停止传播到与该元素关联的控制器。

    另外，正如我在前面所说的那样，stopImmediatePropagation调用stopPropagation. 这就是为什么一起使用它们是没有意义的：如果你要同时使用它们，只需使用stopImmediatePropagation.

    让我们举一个例子来说明它：我有一个元素，我为它分配了 3 个单击事件处理程序（A、B 和 C），其中 B 有一个stopImmediatePropagation. 处理程序按照它们附加的顺序执行，因此当您单击时，将执行 A，然后 B... 和 C 将永远不会执行。

    $("a").on("click", function(e) { 
  console.log("EVENTO A");
});

$("a").on("click", function(e) { 
  console.log("EVENTO B");
  e.stopImmediatePropagation();
});


$("a").on("click", function(e) { 
  console.log("EVENTO C (nunca se ejecutará)");
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#">Pulsa sobre este enlace</a>

    该示例有点简单，因此您看不到 的用处stopImmediatePropagation，但假设您有一个要验证的表单，如果出现故障，您可以这样stopImmediatePropagation做，如果有任何其他事件与该表单相关联，它不会运行。

    • 17

  2. 回答问题，

    1.- 就像preventDefault()它的名字一样，它取消了默认的动作或响应。例如，按下链接会阻止它转到 href 中指定的路径，或者在单击提交按钮时阻止提交表单等。 return false停止代码执行并退出功能块。

    2.- 如果您有一个参数是数组的函数，并且对该参数有多个操作，但如果它为空或未定义，您可能希望通过返回 false 来停止该过程。如果您想提交表单，例如通过 ajax，建议在提交时，使用 停止该表单的提交操作的传播preventDefault()，但继续执行以下代码行，这将采取注意通过ajax提交表单。

    3.-你应该倾向于你真正需要的东西，但一般来说，用jQuery取消输入动作或DOM元素，不建议使用return false

    • 6

  3. 在元素上声明的处理程序内调用stopPropagation可防止事件升级 DOM 层次结构，但不会阻止在该元素上声明的处理程序执行。

    另一方面，stopImmediatePropagation的行为不仅暗示（隐含）stopPropagation而且，考虑到存在多个处理程序，并且它们按顺序执行，对stopImmediatePropagation其中一个处理程序的调用会中断序列，留下剩余的处理程序未执行。

    处理程序的执行顺序是一个尊重它们声明顺序的队列。

    • 4