jquery javascript停止事件 preventdefault解除 - event.preventDefault()與return false





6 Answers

根據我的經驗,使用event.preventDefault()而不是使用return false時,至少有一個明顯的優勢。 假設您正在捕獲錨標記上的click事件,否則如果用戶被導航離開當前頁面將是一個大問題。 如果您的單擊處理程序使用return false來阻止瀏覽器導航,則會打開解釋器無法訪問return語句並且瀏覽器將繼續執行錨標記的默認行為的可能性。

$('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.
});
stoppropagation function

當我想在某個事件被觸發後阻止其他事件處理程序執行時,我可以使用兩種技術之一。 我將在示例中使用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 ? 有什麼更好的方法?




通常,您的第一個選項( preventDefault() )是您要採取的選項,但您必須知道您所處的環境以及您的目標是什麼。

燃料你的編碼有一篇很棒的關於return false;文章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)




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




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

但是,如果您確定代碼不會觸發任何異常,那麼您可以使用您希望的任何方法。

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

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



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

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

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



基本上,這種方式組合的東西,因為jQuery是一個主要關注HTML元素的框架,你基本上阻止了默認,但同時,你停止傳播到泡沫。

所以我們可以簡單地說,在jQuery返回false等於:

return false是e.preventDefault和e.stopPropagation

但是也不要忘記它只是在jQuery或DOM相關的函數中,當你在元素上運行它時,基本上,它會阻止一切都被觸發,包括默認行為和事件的傳播。

基本上在開始使用return false;之前return false; ,先了解一下e.preventDefault();e.stopPropagation(); 那麼,如果你認為你需要同時使用兩者,那麼就乾脆使用它。

所以基本上這個代碼如下:

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

等於這段代碼:

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



Related