“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()方法。