“event.preventDefault()”將阻止的“瀏覽器默認行為”有哪些示例？

Question

我非常理解event.preventDefault()將阻止瀏覽器上的事件觸發的任何默認行為，但這個定義對我來說太寬泛了，例如瀏覽器上的那些事件默認行為是什么？ 因為發現開發人員使用event.preventDefault()是很常見的，但我仍然不明白他們試圖阻止什么樣的行為。

Answer 1

如果您點擊一個鏈接，例如http://example.com ，您的瀏覽器的默認行為將帶您到http://example.com 。

如果您在點擊處理程序中preventDefault ，瀏覽器將不再更改您的窗口位置。

 document.querySelector('.prevent-default').addEventListener('click', function (e) { e.preventDefault(); }, false);

 <a href="http://example.com">Normal Example</a> <a class="prevent-default" href="http://example.com">Prevented Example</a>

其他例子包括：

• submit有關聯的表單提交
• mousedown有關聯的文本選擇
• keydown有關聯的輸入
• touchstart可能具有關聯的滾動/縮放行為。

Answer 2

一個簡單的例子是click事件。 假設你有一個標簽

<a href="/my-sub-page.html" class='ajax-link'>

默認行為是當您單擊此鏈接時，它會將您帶到 /my-sub-page.html 頁面。 但是如果你想避免頁面刷新，而是想使用ajax。 然后你會使用

$('.ajax-link').on('click', function(event){
  event.preventDefault();
  $.ajax({
     url : $(this).attr('href'),
     success : function(response){

        $('.my-content').html(response);
      }
  })
});

或者另一個例子可以是表單提交。 與上面類似，您可以防止表單提交的默認行為，並使用 ajax 並在不加載頁面的情況下從 post 請求中獲取結果。

Answer 3

有許多默認瀏覽器操作：

• mousedown – 開始選擇（移動鼠標選擇）。
• click <a href=""> - 打開頁面。
• click <input type="checkbox"> – 檢查/取消檢查輸入。
• submit - 單擊<input type="submit">或在表單字段內按 Enter 會導致此事件發生，瀏覽器會在此事件之后提交表單。
• keydown – 按下一個鍵可能會導致在字段中添加一個字符或其他操作。
• contextmenu -事件發生在右鍵單擊，動作是顯示在瀏覽器上下文菜單。 等等。

Answer 4

event.preventDefault()方法阻止元素的默認操作發生。

例如：

• 防止提交按鈕提交表單
• 防止鏈接跟隨 URL

使用event.isDefaultPrevented()方法檢查是否為事件調用了preventDefault()方法。