Question

我搜索了一个类似的问题，有人声称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')，但最后会发出三次警报。

Answer 1

e.preventDefault()可防止默认行为
e.stopPropagation()阻止其他事件处理程序（在父元素和子元素上）被触发
e.preventImmediatePropagation()阻止在同一元素上触发其他事件处理程序
return false用于执行上述所有操作

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

Answer 2

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

如果在“a”上使用event.stopPropagation（）。只有“a”点击事件才会被触发休息将被停止。

我是否需要解释“返回错误”？

Answer 3

您还没有足够的代码让我能够找出您想要做的事情 - 但这里是您所询问的条款的解释：

<强> event.preventDefault()

<强> event.stopPropagation()

<强> event.stopImmediatePropagation()

3个jQuery函数在阻止事件和处理程序执行方面略有不同。

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

http://api.jquery.com/event.preventdefault/
event.stopPropagation（）和event.stopImmediatePropagation（）只是略有不同。除了停止元素的默认行为之外，还要使用event.stopPropogation（）和event.stopImmediatePropagation（）来防止事件冒泡DOM树，同时防止任何父处理程序被通知事件。如果你使用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
          }
    });

javascript中返回false和event.preventDefault的不同之处是什么？

3 个答案: