在前端开发中，很多DOM元素自带默认行为，比如<a>标签点击后会跳转到href指定的地址，<form>表单提交时会刷新页面，这些行为有时不符合我们的业务需求，需要通过JavaScript来阻止。
什么是事件默认行为
事件默认行为指的是浏览器对特定事件预定义的响应逻辑，不需要开发者额外编写代码就会自动执行。常见的默认行为包括：
- 点击<a>标签触发页面跳转
- 点击提交按钮触发表单提交并刷新页面
- 在输入框中按下回车键触发表单提交
- 鼠标右键点击触发浏览器上下文菜单
- 拖拽图片时触发默认的拖拽预览行为
标准方法：preventDefault()
现代浏览器中，事件对象提供了preventDefault()方法，调用该方法可以阻止当前事件的默认行为，这是最推荐的使用方式。
下面是一个阻止<a>标签跳转的示例：
// 获取a标签元素
const link = document.querySelector('a');
// 绑定点击事件
link.addEventListener('click', function(event) {
// 阻止a标签的默认跳转行为
event.preventDefault();
console.log('已阻止a标签的默认跳转行为');
});如果是内联事件处理，也可以通过事件对象调用该方法：
<a href="https://ipipp.com" onclick="handleClick(event)">点击我</a>
<script>
function handleClick(event) {
// 阻止默认跳转
event.preventDefault();
alert('跳转已被阻止');
}
</script>兼容旧浏览器的方法：returnValue
在IE8及更早版本的浏览器中，事件对象没有preventDefault()方法，此时可以通过设置事件对象的returnValue属性为false来阻止默认行为。
兼容写法示例：
const link = document.querySelector('a');
link.addEventListener('click', function(event) {
// 兼容旧浏览器的阻止默认行为写法
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
console.log('已处理默认行为阻止逻辑');
});特殊场景：return false的作用
在jQuery的事件处理函数中，return false不仅会阻止事件默认行为，还会阻止事件冒泡。但在原生JavaScript的DOM0级事件中，return false也可以阻止默认行为。
DOM0级事件示例：
<form action="/submit" id="myForm">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
// DOM0级事件绑定
form.onsubmit = function() {
const username = this.querySelector('input').value;
if (!username) {
alert('用户名不能为空');
// return false阻止表单默认提交行为
return false;
}
};
</script>注意事项
- 只有事件的默认行为是可取消的，
preventDefault()才会生效，比如scroll事件的默认行为就无法被阻止 - 事件监听器的
passive属性设置为true时，调用preventDefault()会报错，因为passive监听器承诺不会阻止默认行为，提升滚动性能 - 阻止默认行为不会停止事件传播，如果需要同时阻止事件冒泡，需要额外调用
event.stopPropagation()方法
常见场景示例
阻止表单提交刷新页面
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 后续处理表单数据逻辑
const formData = new FormData(form);
console.log('表单数据：', Object.fromEntries(formData.entries()));
});阻止鼠标右键默认菜单
document.addEventListener('contextmenu', function(event) {
// 阻止浏览器默认的右键菜单
event.preventDefault();
console.log('已阻止右键默认菜单，可自定义菜单内容');
});
JavaScript事件默认行为preventDefaultreturnValue事件处理修改时间：2026-06-05 02:10:27