Question

我完全理解event.preventDefault()会阻止由浏览器上的事件触发的任何默认行为，但这个定义对我来说过于宽泛，例如那些事件默认值浏览器上的行为？因为发现开发人员使用event.preventDefault()是很常见的，但我仍然不明白他们试图阻止什么样的行为。

由于

Answer 1

如果您点击某个链接，例如http://example.com，则您的浏览器的默认行为是转到http://example.com。

如果您在点击处理程序中preventDefault，浏览器将不再更改您的窗口位置。

＆＃13;

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

＆＃13;

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

＆＃13;

其他例子包括：

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 on <input type="checkbox"> – 选中/取消选中输入。
submit – 在表单域中单击 <input type="submit"> 或按 Enter 会导致此事件发生，并且浏览器会在此事件之后提交表单。
keydown – 按下一个键可能会导致在字段中添加一个字符或其他操作。
contextmenu – 事件发生在右键单击时，动作是显示浏览器上下文菜单。等

Answer 4

event.preventDefault（）方法停止发生元素的默认操作。

例如：

阻止提交按钮提交表单
阻止链接跟踪网址

使用 event.isDefaultPrevented（）方法检查是否为该事件调用了 preventDefault（）方法。

`event.preventDefault（）`将阻止“浏览器默认行为”的一些例子？

4 个答案: