[Javascript] event.preventDefault()與返回false


Answers

根據我的經驗,當使用event.preventDefault()使用return false時,至少有一個明顯的優勢。 假設您正在捕獲錨標籤上的點擊事件,否則,如果用戶要離開當前頁面,這將是一個大問題。 如果您的點擊處理程序使用return 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.
});
Question

當我想阻止其他事件處理程序在特定事件觸發後執行時,我可以使用以下兩種技術之一。 我將在示例中使用jQuery,但這也適用於plain-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來代替? 更好的方法是什麼?




我認為最好的方法是使用event.preventDefault()因為如果在處理程序中引發了一些異常,那麼返回false語句將被跳過,行為會與你想要的相反。

但是如果你確信代碼不會觸發任何例外,那麼你可以使用任何你想要的方法。

如果你仍然希望返回false ,那麼你可以把你的整個處理程序代碼放在如下所示的try catch塊中:

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



您可以在onClick事件中為一個元素掛起很多功能。 你怎麼能確定那個false人將是最後一個人? 另一方面preventDefault肯定會阻止元素的默認行為。




return falseevent.preventDefault()之間的主要區別在於您的代碼在下面return false將不會被執行,並且在event.preventDefault()您的代碼將在此語句後執行。

當你寫返回false時,它會在幕後為你做以下事情。

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



一般來說,您的第一個選項( preventDefault() )是您要採用的選項,但您必須知道您處於什麼環境以及您的目標是什麼。

燃料您的編碼有一個偉大的文章return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()

注意:上面Fuel Your Coding鏈接已經產生了5xx錯誤很長時間了。 我在Internet Archive中找到它的一個副本,將其打印到PDF中,並將其放入Dropbox: 歸檔文章return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)