什麼是在javascript中返回false和event.preventDefault的不同？

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

根據您的代碼。如果您在「a」上使用event.preventDefault（），則返回 。如果有的話，它不會重定向到鏈接。默認操作被阻止。

如果在「a」上使用event.stopPropagation（）。只有「一個」點擊事件將被觸發休息將被停止。

我需要解釋一下「返回false」嗎？

Answer 2

• e.preventDefault()防止默認行爲
• e.stopPropagation()阻止其他事件處理程序（對父母和孩子元素）被解僱
• e.preventImmediatePropagation()阻止其他事件處理程序的相同元素
• return false上被解僱用來做所有的以上

請注意，return false已棄用，所以請嘗試使用該事件的 方法。

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 conidition的結果（即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 
      } 
    });