在前端页面开发中，按钮元素除了基础的点击交互外，还可能附带默认的浏览器行为，比如 type 为 submit 的按钮点击后会自动提交所在表单，嵌套在 a 标签内的按钮点击后会触发页面跳转。preventDefault() 是 JavaScript 事件对象的内置方法，能够帮助我们取消这些预设的默认行为，实现自定义的交互逻辑。
preventDefault() 的基本用法
preventDefault() 不需要接收任何参数，调用后会直接取消当前事件的默认动作。它必须挂载在事件对象上，因此在使用时需要先获取事件对象。以下是基础的按钮点击事件阻止默认行为的示例：
// 获取按钮元素
const btn = document.querySelector('#submitBtn');
// 绑定点击事件
btn.addEventListener('click', function(event) {
// 阻止点击事件的默认行为
event.preventDefault();
// 自定义逻辑：打印提示信息
console.log('已阻止按钮默认提交行为，执行自定义逻辑');
});
preventDefault() 的使用条件
并不是所有事件都可以使用 preventDefault() 取消默认行为，只有事件的 cancelable 属性为 true 时，该方法才会生效。我们可以通过事件对象的 cancelable 属性来判断当前事件是否可以被取消：
btn.addEventListener('click', function(event) {
if (event.cancelable) {
event.preventDefault();
console.log('当前事件可以取消默认行为，已成功阻止');
} else {
console.log('当前事件不支持取消默认行为');
}
});
常见使用场景
1. 阻止表单提交默认行为
当按钮的 type 属性为 submit 且位于 form 表单内部时，点击按钮会默认触发表单提交并刷新页面，使用 preventDefault() 可以阻止这个行为，改为通过 AJAX 提交表单数据：
const form = document.querySelector('#userForm');
const submitBtn = document.querySelector('#formSubmitBtn');
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单数据
const formData = new FormData(form);
// 执行自定义提交逻辑，比如发送AJAX请求
fetch('https://ipipp.com/api/submit', {
method: 'POST',
body: formData
}).then(res => res.json())
.then(data => {
console.log('表单提交成功', data);
});
});
2. 阻止 a 标签内按钮的跳转行为
如果按钮被包裹在 a 标签内部，点击按钮会触发 a 标签的默认跳转行为，此时可以在按钮的点击事件中调用 preventDefault() 阻止跳转：
const linkBtn = document.querySelector('#linkBtn');
linkBtn.addEventListener('click', function(event) {
event.preventDefault();
console.log('已阻止 a 标签的跳转行为，执行自定义逻辑');
});
常见误区
- 不要在事件绑定的箭头函数中丢失事件对象：如果使用箭头函数绑定事件，需要确保正确传入事件参数，否则无法调用 preventDefault()。正确的写法是
btn.addEventListener('click', (event) => { event.preventDefault(); }) - 不要和 stopPropagation() 混淆：preventDefault() 是阻止事件的默认行为，而 stopPropagation() 是阻止事件冒泡，两者的作用完全不同，不要混用
- 内联事件中使用需要显式传入事件对象：如果是在 HTML 元素的 onclick 属性中直接使用，需要手动传入 event 参数，比如 <button onclick="handleClick(event)">点击</button>，然后在对应的函数中调用 event.preventDefault()
注意事项
如果事件本身就不具备默认行为，调用 preventDefault() 也不会报错，只是不会产生任何效果。另外，部分浏览器对于某些特定事件的默认行为做了限制，比如 beforeunload 事件的默认行为在某些场景下无法通过 preventDefault() 完全取消，需要根据具体场景做兼容处理。
preventDefaultJavaScript事件处理按钮点击事件修改时间：2026-07-18 19:24:24