javascript 中的 return false 和 event.preventDefault 有啥不同？ [复制]

Posted 2023-02-21

【中文标题】javascript 中的 return false 和 event.preventDefault 有啥不同？ [复制]

【英文标题】：What is the different return false and event.preventDefault in javascript? [duplicate]javascript 中的 return false 和 event.preventDefault 有什么不同？ [复制]

【发布时间】：2014-06-13 13:11:24

【问题描述】：

我搜索了一个类似的问题，有人声称return false 类似于event.stopPropagation() 和event.preventDefault()。但是我已经尝试了声称的示例，但它不起作用。代码如下。

<ul>
    <li>
        <a href="">baidu.com</a>
    </li>
</ul>

这是html的代码。

ul.addEventListener('click', function(event) 
    alert('ul');
, false);

li.addEventListener('click', function() 
    alert('li');
, false);

a.addEventListener('click', function(event) 
    alert('a');
    return false;
, false);

这是js的代码

如果返回 false 是 event.stopPropagation() 和 event.preventDefault()。

只会alert('a')，但最后还是会提示3次。

【问题讨论】：

return false 在 jQuery 中执行此操作，在 vanilla JS 中您需要使用事件的方法。

@Teemu——没有 jQuery 标签，问题文本中没有 jQuery，代码中没有，那么你如何在这里获得 jQuery？

@RobG 这是对“Somebody says that the return false is both event.stopPropagation() and event.preventDefault().”的唯一解释

@teemu——见 Tim S 的回答。

【参考方案1】：

e.preventDefault() 阻止默认行为 e.stopPropagation() 防止触发其他事件处理程序（在父元素和子元素上） e.preventImmediatePropagation() 防止在同一元素上触发其他事件处理程序 return false 曾经做过上述所有事情

请注意return false已被弃用，因此请尝试使用事件的方法。

【参考方案2】：

根据您的代码。 如果您在“a”上使用 event.preventDefault()。如果您有任何链接，它不会重定向到该链接。阻止默认操作。

如果你在“a”上使用 event.stopPropagation()。只有“a”点击事件将被触发，其余的将被停止。

“return false”需要解释一下吗？

【讨论】：

可以，请解释一下“return false”

【参考方案3】：

你没有真正包含足够多的代码让我能够弄清楚你想要做什么 - 但这里是你询问的术语的解释：

event.preventDefault()

event.stopPropagation()

event.stopImmediatePropagation()

是 3 个 jQuery 函数，它们在阻止事件和处理程序执行的方式上略有不同。

event.PreventDefault() 用于阻止元素的默认行为。例如，如果它是 <button>，它将不再是可点击的，并且任何绑定到它的处理程序或 onclick="" 代码都不会被触发。

http://api.jquery.com/event.preventdefault/

event.stopPropagation() 和 event.stopImmediatePropagation() 只是略有不同。除了停止元素的默认行为外，当您想要防止事件在 DOM 树中冒泡时使用 event.stopPropogation() 和 event.stopImmediatePropagation() ，同时也防止任何父处理程序收到事件通知。如果您使用 event.stopImmediatePropagation() 它不仅会阻止执行偶数并阻止它冒泡到 dom 中的父元素，而且还会阻止任何未来的处理程序被调用该元素。例如，如果它是 <button>，它将不再是可点击的，并且您将无法在以后绑定未来的行为，例如 onclick=""，而无需强制刷新页面。

http://api.jquery.com/event.stopimmediatepropagation/

http://api.jquery.com/event.stoppropagation/

return false;

另一方面，可以说是许多编程语言中存在的基本编程约定，而 Javascript 就是其中一种语言。

首先，与 jQuery 示例不同，它不是一个函数。 return 表示返回一个值（通常是变量或函数的输出）。第二部分只是一个布尔值false。

它可能与上述 jQuery 函数相关联的一个原因是因为它经常用于内联 html 代码，如

 <a onclick="window.open(this.href); return false;" href="https://some_website.com/">Go To Website</a>

如果您需要防止表单被过早提交，则与<form> 元素类似。一个例子是不完整表单的表单验证，在这种情况下你可以做这样的事情

    function validateForm() 
        var subject = document.forms["contact"]["subject"].value;
        var message = document.forms["contact"]["message"].value;
        var name = document.forms["contact"]["name"].value;
        var email = document.forms["contact"]["email"].value;
        
        if ( subject == null || subject == "" || subject == " " || message == null || message == "" || message == " " || name == null || name == "" || name == " " || email == null || email == "" || email == " " ) 
            $('#form-incomplete').html('<strong>Please fill out all the fields before sending email</strong>');
            
            return false;
        
    

您经常看到return false; 以这种方式使用：作为if 条件的结果（即if (some_condition_is_present) return false; // i.e. halt your function ，这绝对是您的代码中缺少的内容。如果我理解正确，您会想尝试类似的东西

    <a class="some_class" href="http://some-other-website.com">WEBSITE LINK</a>

然后在页面的其他地方你可以有这样的脚本：

    $("a.some_class").on("click", function(e) 
          e.preventDefault();
          // now the link won't go to http://some-other-website.com
          // but you can still bind other behavour to the element such as alert 
          // console log or trigger another function 
    );

或

    $("a.some_class").on("click", function(e) 
          e.stopPropogation();
          // now the link won't go to http://some-other-website.com
          // and the other elements of the DOM aren't aware that it's been clicked
          // but we can still bind other behaviour like we could:
          alert("user not directed to http://some-other-website.com");
    );

或

    $("a.some_class").on("click", function(e) 
          e.stopPropogation();
          // now the link won't go to http://some-other-website.com
          // and the other elements of the DOM aren't aware that it's been clicked
          // but we can't bind other behaviour to the element.
          // If we try:
          alert("user not directed to http://some-other-website.com");
          // it no longer alerts
    );

或

    $("a.some_class").on("click", function(e) 
          if (!foo) 
              return false; // if our variable is undefined or null we can directly exit our function without executing any code
           else 
              a.href = foo;
              $("a.some_class").trigger("click"); // however, if our variable is defined we use that variable's value to change where the href of the <a> element will redirect the user's browswer
          
    );

【讨论】：

您列为 jQuery 函数的函数是 DOM 函数的副本。 jQuery 复制了大多数 DOM 函数，因此可以在 jQuery 对象上调用它们，例如 $(...).click() 复制 DOM click 方法。见蒂姆的回答。另请参阅 DOM 事件 preventDefault、stopPropagation 和 stopImmediatePropagation。

非常详细的回答+1