event.preventDefault() vs. return false

技术背景

在前端开发中，处理事件时常常需要阻止事件的默认行为或停止事件传播。event.preventDefault() 和 return false 是两种常见的实现方式，但它们的功能和使用场景有所不同。了解它们的区别对于正确处理事件至关重要。

实现步骤

1. event.preventDefault() 的使用

event.preventDefault() 用于阻止元素的默认行为。例如，当用户点击链接时，阻止页面跳转；点击提交按钮时，阻止表单提交。

// 阻止链接跳转
const hyperlink = document.querySelector('a');
hyperlink.addEventListener('click', function (e) {
    e.preventDefault();
});

// 阻止表单提交
const submitButton = document.querySelector('input[type="submit"]');
submitButton.addEventListener('click', function (e) {
    e.preventDefault();
});

2. return false 的使用

在 jQuery 事件处理程序中，return false 相当于同时调用 e.preventDefault() 和 e.stopPropagation()。但在使用 addEventListener 方法时，return false 对默认行为没有影响。

// jQuery 中使用 return false
$(element).on('click', function (e) {
    return false;
});

// 使用 addEventListener 时 return false 无效
hyperlink.addEventListener('click', function (e) {
    return false; // 无效
});

// 使用 onclick 属性时 return false 有效
hyperlink.onclick = function (e) {
    return false;
};

核心代码

阻止链接跳转

// 使用 event.preventDefault()
const link = document.querySelector('a');
link.addEventListener('click', function (e) {
    e.preventDefault();
});

// 使用 jQuery 的 return false
$('a').click(function () {
    return false;
});

阻止表单提交

// 使用 event.preventDefault()
const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
    e.preventDefault();
});

// 使用 jQuery 的 return false
$('form').on('submit', function () {
    return false;
});

最佳实践

1. 建议在事件处理程序中使用 preventDefault 方法代替 return false。因为 return false 仅在使用 onclick 属性时有效，且会移除同一事件的其他处理程序。
2. 如果使用 jQuery 管理事件，可以使用 return false，但为了避免运行时错误导致默认行为执行，建议在执行自定义处理程序之前使用 preventDefault 方法。

$(element).on('click', function (e) {
    e.preventDefault();
    // 执行自定义处理程序
});

常见问题

1. return false 在 addEventListener 中无效：return false 仅在事件处理程序作为元素属性声明时有效，使用 addEventListener 时不会阻止默认行为。
2. 运行时错误导致 return false 失效：如果事件处理程序中出现运行时错误，return false 语句可能不会执行，导致默认行为仍然发生。使用 preventDefault 方法可以避免这种情况。