event.preventDefault（）与返回false

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

1.event.preventDefault()

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

2.return false

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

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

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

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

921655 次浏览
小开

你可以为一个元素在onClick事件上挂起很多函数。你怎么能确定false将是最后一个触发的？另一方面，preventDefault肯定只会阻止元素的默认行为。

小开

我认为

event.preventDefault()

是w3c指定的取消事件的方式。

您可以在活动取消的W3C规范中阅读此内容。

此外，您不能在任何情况下都使用返回false。当在href属性中给出javascript函数时，如果您返回false，则用户将被重定向到写入false字符串的页面。

小开
最佳答案

在jQuery事件处理程序中中的return false实际上与在传递的jQuery. Event对象。上调用e.preventDefault和e.stopPropagation相同

e.preventDefault()将防止默认事件发生，e.stopPropagation()将防止事件冒泡，return false将两者兼而有之。请注意，此行为与正常（非jQuery）事件处理程序不同，值得注意的是，return false确实没有阻止事件冒泡。

来源：johnresig

使用event.preventDefault（）而不是"返回false"来取消href点击有什么好处吗？

小开

这不是你所说的“JavaScript”问题；这是一个关于jQuery设计的问题。

jQuery和johnresig中的先前链接引用（在karim79的消息中）似乎是对事件处理程序一般工作方式的误解。

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

事件处理程序内容属性和返回false的事件处理程序IDL属性可防止该事件处理程序的默认操作。

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

如需进一步阅读，请参阅[[W3C DOM 2 Events留档]][1]。

小开

根据我的经验，使用event.preventDefault（）比使用返回false至少有一个明显的优势。假设你正在捕获锚标记上的单击事件，否则如果用户被导航离开当前页面，这将是一个大问题。如果你的单击处理程序使用返回false来阻止浏览器导航，它会打开解释器无法到达返回语句的可能性，浏览器将继续执行锚标记的默认行为。

$('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.});
小开

一般来说，你的第一个选择（preventDefault()）是要采取的，但你必须知道你所处的环境和你的目标是什么。

为您的编码加油有一个伟大的关于#0 vs#1 vs#2 vs#3的文章。

小开

使用jQuery时，return false在调用它时做了3件不同的事情：

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

有关更多信息和示例，请参阅jQuery事件：停止（错误）使用返回False。

小开

我认为最好的方法是使用event.preventDefault()，因为如果在处理程序中引发了一些异常，那么返回false语句将被跳过，行为将与您想要的相反。

但是，如果您确定代码不会触发任何异常，那么您可以使用任何您想要的方法。

如果你仍然想要返回false，那么你可以把你的整个处理程序代码放在一个try catch块中，如下所示：

$('a').click(function (e) {try{your code here.........}catch(e){}return false;});
小开

我的意见从我的经验说，它总是更好地使用 

event.preventDefault()

实际上停止或阻止提交事件，只要我们需要而不是return falseevent.preventDefault()正常工作。

小开

return false和event.preventDefault()之间的主要区别是return false以下的代码将不会被执行，在event.preventDefault()的情况下，您的代码将在此语句之后执行。

当你写返回false时，它会在幕后为你做以下事情。

* Stops callback execution and returns immediately when called.* event.stopPropagation();* event.preventDefault();
小开

e.prevent默认（）；

它只是停止元素的默认操作。

实例前：-

防止超链接跟随URL，阻止提交按钮提交表单。当你有很多事件处理程序并且你只想防止默认事件发生，&多次发生时，为此，我们需要在函数（）的顶部使用。

原因：-

使用e.preventDefault();的原因是，在我们的代码中，代码出现问题，然后它将允许执行链接或表单以提交或允许执行或允许您需要执行的任何操作。&链接或提交按钮将被提交&仍然允许事件的进一步传播。

<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a><script type="text/javascript">function doSomethingElse(){console.log("This is Test...");}$("a").click(function(e){e.preventDefault();});</script></body></html>

返回False；

它只是停止执行函数（）。

“return false;”将结束整个进程的执行。

原因：-

使用返回false；的原因是您不想再在严格模式下执行函数。

<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><a href="#" onclick="returnFalse();">Blah</a><script type="text/javascript">function returnFalse(){console.log("returns false without location redirection....")return false;location.href = "http://www.google.com/";         
}</script></body></html>

小开

基本上，这种方式可以组合事物，因为jQuery是一个主要关注超文本标记语言元素的框架，基本上可以防止默认值，但同时可以停止传播以冒泡。

所以我们可以简单地说，在jQuery中返回false等于：

返回falsee.prevent默认e.stop传播

但也不要忘记它都在jQuery或DOM相关的函数中，当你在元素上运行它时，基本上，它会阻止一切触发，包括事件的默认行为和传播。

基本上在开始使用return false;之前，首先要了解e.preventDefault();和e.stopPropagation();的作用，然后如果你认为你同时需要两者，那么就简单地使用它。

所以基本上是下面的代码：

$('div').click(function () {return false;});

平等到此代码：

$('div').click(function (event) {event.preventDefault();event.stopPropagation();});
小开

根据我的经验event.stop传播（）主要用于CSS效果或动画作品，例如，当你对卡片和按钮元素都有悬停效果时，当你悬停在按钮上时，卡片和按钮的悬停效果都会被触发在这种情况下，你可以使用event.stop传播（）停止冒泡操作，event.preventDefault（）是为了防止浏览器操作的默认行为。例如，你有表单，但你只为提交操作定义了点击事件，如果用户通过按回车键提交表单，浏览器是由按键事件触发的，而不是你的点击事件在这里你应该使用event.preventDefault（）来避免不适当的行为。我不知道这是什么鬼东西返回错误；对不起。

小开

preventDefault()和return false是防止默认事件发生的不同方法。

例如，当用户点击外部链接时，我们应该显示一个确认模式，询问用户是否重定向到外部网站：

hyperlink.addEventListener('click', function (e) {// Don't redirect the user to the linke.preventDefault();});

或者我们不想在单击其提交按钮时提交表单。相反，我们想先验证表单：

submitButton.addEventListener('click', function (e) {// Don't submit the form when clicking a submite.preventDefault();});

差异

  1. 如果您使用addEventListener方法处理事件，return false对默认行为没有任何影响。只有当事件处理程序被声明为元素的属性时，它才有效：
hyperlink.addEventListener('click', function (e) {// Does NOT workreturn false;});    
// Workhyperlink.onclick = function (e) {return false;};
  1. 根据HTML 5规范，return false将取消除mouseover事件之外的事件。

良好做法

  1. 建议在事件处理程序中使用preventDefault方法而不是return false。因为后者仅适用于使用onclick属性，该属性将删除同一事件的其他处理程序。

  2. 如果您使用jQuery来管理事件，那么您可以在事件处理程序中使用return false：

$(element).on('click', function (e) {return false;});

在返回false的值之前，处理程序会做其他事情。问题是，如果处理程序中发生任何运行时错误，我们将不会在最后到达返回false语句。

在这种情况下，将采用默认行为：

$(element).on('click', function (e) {// Do something here, but if there's an error at runtime// ...return false;});

我们可以通过在执行任何自定义处理程序之前使用preventDefault方法来避免这种情况：

$(element).on('click', function (e) {e.preventDefault();
// Do something here// The default behavior is prevented regardless of errors at runtime// ...});

很高兴知道

如果您使用jQuery来管理事件，那么return false的行为将与preventDefault()和stopPropagation()方法相同：

$(element).on('click', function (e) {// Prevent the default event from happening and// prevent the event from bubbling up to the parent elementreturn false;});

提交答案