event.preventDefault（）与返回false

JavaScript

小卤蛋Green小哥

2020-03-09

当我想阻止其他事件处理程序在某个事件被触发后执行时，可以使用两种技术之一。我将在示例中使用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改为使用它？有什么更好的方法？

第161篇《event.preventDefault（）与返回false》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答

十三LEY 2020.03.09

return false和之间的主要区别event.preventDefault()是您的代码如下return false will not be executed and in event.preventDefault() case your code will execute after this statement.

当您编写return false时，它将在后台为您做以下事情。

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

路易飞云 2020.03.09

根据我的经验，event.stopPropagation（）主要用于CSS效果或动画作品中，例如，当您同时对卡片和按钮元素都具有悬停效果时，当您在按钮上悬停时，卡片和按钮的悬停效果都会在这种情况下触发，您可以使用event.stopPropagation（）停止冒泡操作，而event.preventDefault（）用于阻止浏览器操作的默认行为。例如，您有一个表单，但是您仅定义了Submit操作的click事件，如果用户通过按Enter提交表单，则由keypress事件触发的浏览器（而不是您的click事件）在这里应该使用event.preventDefault（）以避免不合适行为。我不知道该死的是假。对不起。有关更多说明，请访问此链接并在＃33行播放https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

GO阿飞 2020.03.09

e.preventDefault（）;

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

Instance Ex.:-

prevents the hyperlink from following the URL, prevents the submit button to submit the form. When you have many event handlers and you just want to prevent default event from occuring, & occuring from many times, for that we need to use in the top of the function().

原因：-

使用的原因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;

它只是停止执行function（）。

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

原因：-

使用return 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>

展开摘要

LEYJim 2020.03.09

基本上，通过这种方式组合事物，因为jQuery是一个主要关注HTML元素的框架，基本上可以防止使用默认元素，但是与此同时，您可以停止传播以冒泡。

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

返回false是e.preventDefault和e.stopPropagation

但是也不要忘记，所有这些都在jQuery或DOM相关函数中，当您在元素上运行它时，基本上，它可以防止一切触发，包括事件的默认行为和传播。

基本上使用启动前return false;，先了解什么e.preventDefault();和e.stopPropagation();做什么，然后，如果你认为你既需要在同一时间，然后简单地使用它。

所以基本上这段代码如下：

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

是等于该代码：

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

hide on 2020.03.09

根据我的经验，我认为使用它总是更好

event.preventDefault()

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

LEY逆天Near 2020.03.09

我认为

event.preventDefault()

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

您可以在W3C规范中有关事件取消的内容中进行阅读。

同样，您不能在所有情况下都使用return false。当在href属性中提供javascript函数时，如果您返回false，则该用户将被重定向到写有错误字符串的页面。

神奇宝儿 2020.03.09

通常，您的第一个选项（preventDefault()）是要采用的选项，但是您必须知道您所处的环境以及目标是什么。

加油您的编码在return false;vs event.preventDefault()vs event.stopPropagation()vs 上event.stopImmediatePropagation()有一篇很棒的文章。

EvaDavaid 2020.03.09

顾名思义，这不是一个“ JavaScript”问题。这是关于jQuery设计的问题。

jQuery的和以前链接引用来自约翰Resig的（在karim79的消息）似乎是如何事件处理程序的一般工作的源误解。

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

MDN的文档说明return false了事件处理程序的工作方式

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

有关更多阅读，请参阅MSDN上的attachEvent和W3C DOM 2事件文档。

路易Pro 2020.03.09

使用jQuery时，return false在调用它时会做3件事：

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

有关更多信息和示例，请参见jQuery Events：Stop（Mis）Using Return False。

JinJin理查德 2020.03.09

您可以在onClick事件中为一个元素挂起许多功能。您如何确定false一个将是最后一个被解雇的人？preventDefault另一方面，肯定会仅阻止元素的默认行为。

猪猪JinJin西里 2020.03.09

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

e.preventDefault()将防止发生默认事件，e.stopPropagation()将防止事件冒泡，并且return false两者都会发生。请注意，此行为不同于正常（非jQuery的）事件处理程序，其中，值得注意的是，return false也没有冒泡停止该事件。

资料来源：John Resig

使用event.preventDefault（）代替“ return false”来取消href点击有什么好处？

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

1。 event.preventDefault()

2。 return false

1。 `event.preventDefault()`

2。 `return false`