javascript停止事件 - preventdefault解除




event.preventDefault()與return false (8)

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

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

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

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


e.preventDefault();

它只是停止元素的默認操作。

實例Ex.:-

防止超鏈接跟隨URL,阻止提交按鈕提交表單。 如果你有許多事件處理程序,並且你只是想阻止多次出現默認事件,那麼我們需要在函數()的頂部使用。

原因:-

使用e.preventDefault();的原因e.preventDefault(); 就是在我們的代碼中,代碼中出現問題,然後它將允許執行鏈接或表單以提交或允許執行或允許您需要執行的任何操作。 &link或submit按鈕將被提交並仍允許進一步傳播活動。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

返回False;

它只是停止執行函數()。

return false; ”將結束整個過程的執行。

原因:-

使用return false的原因; 是你不想在嚴格模式下再執行該功能。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>


基本上,這種方式組合的東西,因為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();
});

jQuery事件處理程序中 return false e.preventDefault與在傳遞的jQuery.Event對像上調用e.preventDefaulte.stopPropagation相同

e.preventDefault()將阻止發生默認事件, e.stopPropagation()將阻止事件冒泡並return false將同時執行。 請注意,此行為與普通 (非jQuery)事件處理程序不同,其中,值得注意的是, return false不會阻止事件冒泡。

資料來源: John Resig

使用event.preventDefault()而不是“return false”來取消href點擊有什麼好處?


我認為

event.preventDefault()

是w3c指定的取消事件的方式。

您可以在W3C規範中了解事件取消

此外,您不能在任何情況下使用return false。 在href屬性中提供javascript函數時,如果返回false,則用戶將被重定向到寫入了錯誤字符串的頁面。


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

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

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

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

根據我的經驗,我的觀點是,使用它總是更好

event.preventDefault() 

實際上停止或阻止提交事件,每當我們需要而不是return false event.preventDefault()工作正常。


正如你所說的那樣,這不是一個“JavaScript”問題; 這是一個關於jQuery設計的問題。

jQuery和John Resig 先前鏈接的引用 (在karim79's message )似乎是對事件處理程序如何工作的源頭誤解。

事實:返回false的事件處理程序會阻止該事件的默認操作。 它不會阻止事件傳播。 自Netscape Navigator的舊時代以來,事件處理程序一直以這種方式工作。

MDN文檔解釋了事件處理程序中return false的工作原理

jQuery中發生的事情與事件處理程序的情況不同。 DOM事件監聽器和MSIE“附加”事件完全不同。

有關進一步閱讀,請參閱MSDN上的attachEventW3C DOM 2 Events文檔







event-propagation