event.preventDefault() vs. return false

preventDefault() 和 return false 是两种阻止默认事件行为的方式。

例如，当用户点击一个外部链接时，我们应该显示一个确认模态框，询问用户是否要跳转到外部网站：

hyperlink.addEventListener('click', function (e) {
    // 不跳转到链接
    e.preventDefault();
});

或者，我们不希望在点击提交按钮时提交表单，而是先验证表单：

submitButton.addEventListener('click', function (e) {
    // 不提交表单
    e.preventDefault();
});

区别

return false 对于使用 addEventListener 方法处理的事件没有任何效果。它只在事件处理器声明为元素的属性时起作用：

hyperlink.addEventListener('click', function (e) {
    // 不起作用
    return false;
});
    
// 起作用
hyperlink.onclick = function (e) {
    return false;
};

根据 HTML 5 规范，return false 将取消事件，除了 mouseover 事件。

最佳实践

建议在事件处理器内部使用 preventDefault 方法而不是 return false。因为后者仅在使用 onclick 属性时起作用，这会移除同一事件的其他处理器。
如果使用 jQuery 来管理事件，那么可以在事件处理器内部使用 return false：

$(element).on('click', function (e) {
    return false;
});

在返回 false 之前，处理器会执行其他操作。问题是，如果处理器中发生任何运行时错误，我们将无法执行到返回 false 语句的部分。

在这种情况下，默认行为将会被执行：

$(element).on('click', function (e) {
    // 在这里做一些事，但如果在运行时出错
    // ...
    return false;
});

我们可以通过在执行任何自定义处理器之前使用 preventDefault 方法来避免这种情况：

$(element).on('click', function (e) {
    e.preventDefault();

    // 在这里做一些事
    // 无论运行时是否出错，都阻止默认行为
    // ...
});

请注意

如果使用 jQuery 来管理事件，return false 将表现得与 preventDefault() 和 stopPropagation() 方法相同：

$(element).on('click', function (e) {
    // 阻止默认事件发生
    // 阻止事件冒泡到父元素
    return false;
});