event.preventDefault() 与返回 false

IT技术 javascript jquery event-handling dom-events event-propagation
2020-12-25 23:20:08

当我想阻止其他事件处理程序在某个事件被触发后执行时,我可以使用两种技术之一。我将在示例中使用 jQuery,但这也适用于普通 JS:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

这两种停止事件传播的方法之间有什么显着区别吗?

对我来说,return false;比执行一个方法更简单、更短并且可能更不容易出错。使用该方法,您必须记住正确的大小写、括号等。

另外,我必须在回调中定义第一个参数才能调用该方法。也许,有一些原因为什么我应该避免这样做preventDefault而改用?什么是更好的方法?

6个回答

return falsejQuery 事件处理程序中调用实际上e.preventDefaulte.stopPropagation在传递的jQuery.Event 对象调用相同

e.preventDefault()将阻止默认事件发生,e.stopPropagation()将阻止事件冒泡,并且return false两者都将执行。请注意,此行为与普通(非 jQuery)事件处理程序不同,在普通(非 jQuery)事件处理程序中,值得注意的是,return false不会阻止事件冒泡。

资料来源:约翰·雷西格

使用 event.preventDefault() 而不是“return false”来取消 href 点击有什么好处?

在这里定义“传播”和“默认”会很有帮助。我一直在混淆他们。这样对吗? 传播= 我的代码(父元素的 JavaScript 事件处理程序)。 默认= 浏览器代码(链接、文本选择等)
2021-02-12 23:20:08
冒泡的真正含义是什么?例子?
2021-02-15 23:20:08
return false来自 DOM2 处理程序 ( addEventListener) 根本不做任何事情(既不阻止默认值也不停止冒泡;来自 Microsoft DOM2-ish 处理程序 ( attachEvent),它阻止默认值但不冒泡;来自 DOM0 处理程序 ( onclick="return ..."),它阻止默认值(提供)您将 包含return在属性中)但不冒泡;从 jQuery 事件处理程序中,它可以同时执行这两项操作,因为那是 jQuery 的事情。详细信息和现场测试在这里
2021-02-26 23:20:08
1为指出的是,return false确实停止在非jQuery的事件处理程序事件传播。<a href="#" onclick="return false">Test</a>冒泡停止该事件。
2021-03-05 23:20:08

根据我的经验,与使用 return false 相比,使用 event.preventDefault() 至少有一个明显的优势。假设您正在捕获锚标记上的点击事件,否则如果用户要离开当前页面,这将是一个大问题。如果您的点击处理程序使用 return false 来阻止浏览器导航,则解释器可能无法到达 return 语句,浏览器将继续执行锚标记的默认行为。

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

使用 event.preventDefault() 的好处是您可以将其添加为处理程序的第一行,从而保证锚点的默认行为不会触发,无论是否未到达函数的最后一行(例如运行时错误) )。

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

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});
两者都是阻止事件默认行为的方法,这只是您要解决的问题的问题。
2021-02-17 23:20:08
虽然是这样,但在进行渐进增强时,相反的行为通常更可取(我认为这可能是覆盖默认操作的最可能原因)
2021-03-05 23:20:08

正如您所说,这不是一个“JavaScript”问题;这是一个关于 jQuery 设计的问题。

jQuery 和先前链接的来自John Resig 的引用(在karim79 的 消息中)似乎是对事件处理程序通常如何工作的误解的根源。

事实:返回 false 的事件处理程序会阻止该事件的默认操作。它不会停止事件传播。自 Netscape Navigator 的旧时代以来,事件处理程序一直以这种方式工作。

MDN文档解释return false了事件处理程序的工作原理

jQuery 中发生的事情与事件处理程序中发生的事情不同。DOM 事件侦听器和 MSIE“附加”事件完全不同。

如需进一步阅读,请参阅MSDN 上的 attachEventW3C DOM 2 事件文档

@rds 说“preventDefault 不会停止通过 DOM 进一步传播事件。应该使用 event.stopPropagation。”
2021-02-19 23:20:08
回答上一个密切相关的问题称,之前HTML 5,从事件处理程序返回false没有specced作为对所有做任何事情。现在,也许这是对(难以理解的)规范的错误解释,或者也许尽管没有从字面上进行规范,但所有浏览器的解释return false都与event.preventDefault(). 但我不知道;这足以让我用少许盐来服用。
2021-02-23 23:20:08
他将其标记为 JavaScript 和 jQuery,两者都是正确的。jQuery只是 JavaScript 的一个子集,而不是它自己的语言。
2021-02-26 23:20:08
我讨厌谷歌中的每个 javascript 搜索结果实际上都是关于 jQuery,+1
2021-03-08 23:20:08

通常,您可以选择第一个选项 ( preventDefault()),但您必须知道您所处的环境以及您的目标是什么。

Fuel Your Coding一篇关于return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation()的很棒的文章

@VisruthCV 查看我添加的带有存档版本链接的注释
2021-03-03 23:20:08

使用 jQueryreturn false时,调用它时会做 3 件单独的事情:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 停止回调执行并在调用时立即返回。

有关更多信息和示例,请参阅jQuery 事件:停止(错误)使用 Return False

如果代码的其他部分正在侦听此事件,则 event.stopPropagation(); 会取消他们的回调吗?
2021-02-22 23:20:08