event.preventDefault（） vs. return false

javascript jquery event-handling dom-events event-propagation

2022-08-29 21:47:08

当我想阻止其他事件处理程序在触发某个事件后执行时，我可以使用两种技术之一。我将在示例中使用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

答案 1

return false从 jQuery 事件处理程序中实际上与调用两者以及调用传递的 jQuery.Event 对象相同。e.preventDefaulte.stopPropagation

e.preventDefault()将防止默认事件发生，将防止事件冒泡，并将同时执行这两项操作。请注意，此行为与正常（非 jQuery）事件处理程序不同，在正常（非 jQuery）事件处理程序中，值得注意的是，它不会阻止事件冒泡。e.stopPropagation()return falsereturn false

来源：约翰·雷西格

使用 event.preventDefault（）而不是 “return false” 来取消 href 点击有什么好处吗？

答案 2

根据我的经验，与使用 return false 相比，使用 event.preventDefault（）至少有一个明显的优势。假设您正在捕获锚点标记上的单击事件，否则，如果要将用户导航离开当前页面，这将是一个大问题。如果单击处理程序使用 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.
});

event.preventDefault（） vs. return false

1.event.preventDefault()

2.return false

1.`event.preventDefault()`

2.`return false`