在网页交互开发中，很多元素自带默认行为，比如<a>标签点击会跳转页面，<form>表单提交会刷新页面，鼠标右键点击会弹出浏览器默认菜单。有时候我们需要取消这些默认行为，实现自定义的交互逻辑，这时候就需要用到JavaScript的阻止默认事件方法。
什么是默认事件行为
默认事件行为指的是浏览器为特定元素或操作预设的响应逻辑，不需要开发者额外编写代码就会自动触发。常见的默认行为包括：
- 点击<a>标签时，浏览器会自动跳转到href属性指定的地址
- 点击<input type="submit">按钮提交表单时，浏览器会刷新当前页面并发送表单数据
- 在页面上点击鼠标右键时，浏览器会弹出默认的右键上下文菜单
- 在文本框中输入内容时，浏览器会默认将字符显示在文本框中
标准阻止方法：event.preventDefault
现代浏览器都支持event.preventDefault()方法，这是W3C标准规定的阻止默认事件行为的标准方式，调用该方法后，当前事件对应的默认行为就不会执行了。
下面是一个点击链接不跳转的示例：
// 获取a标签元素
const link = document.querySelector('#testLink');
// 绑定点击事件
link.addEventListener('click', function(event) {
// 阻止a标签的默认跳转行为
event.preventDefault();
// 自定义点击后的逻辑
console.log('链接被点击，但是不会跳转');
});在上面的代码中，我们给id为testLink的<a>标签绑定了点击事件，在事件处理函数中调用event.preventDefault()，这样点击链接的时候就不会跳转到href指定的地址，只会执行我们自定义的打印逻辑。
旧版IE兼容处理：event.returnValue
在IE8及更早的版本中，不支持event.preventDefault()方法，这时候需要使用event.returnValue = false来阻止默认行为。为了兼容旧版浏览器，我们可以同时处理两种情况。
// 兼容处理阻止默认事件的函数
function preventDefaultEvent(event) {
// 标准浏览器处理
if (event.preventDefault) {
event.preventDefault();
} else {
// IE8及以下浏览器处理
event.returnValue = false;
}
}
// 使用示例
const form = document.querySelector('#testForm');
form.addEventListener('submit', function(event) {
// 调用兼容函数阻止表单默认提交行为
preventDefaultEvent(event);
// 自定义表单提交逻辑，比如通过AJAX发送数据
console.log('表单不会刷新页面，走自定义提交逻辑');
});其他相关注意点
event.stopPropagation和阻止默认事件的区别
很多开发者会混淆event.stopPropagation()和event.preventDefault()，前者是阻止事件冒泡，让事件不再向上层元素传播，并不会影响元素的默认行为；后者才是专门用来阻止默认行为的，两者作用完全不同，不要混用。
直接在事件属性中返回false
在DOM0级事件处理中，也就是直接在HTML元素上写onclick属性，或者在JS中给元素的onclick属性赋值函数，这时候如果在函数中返回false，也可以阻止默认行为，但是这种方式只适用于DOM0级事件，不推荐在复杂项目中使用。
<!-- 直接在HTML事件属性中返回false阻止跳转 --> <a href="https://ipipp.com" onclick="return false;">点击不会跳转的链接</a>
不是所有事件都能阻止默认行为
有些事件的默认行为是无法被阻止的，比如浏览器的页面关闭事件、部分系统级的交互事件，调用event.preventDefault()也不会生效，开发时需要注意这类场景。
常见场景示例
下面列举几个实际开发中常用的阻止默认行为的场景：
| 场景 | 实现方式 |
|---|---|
| 阻止表单默认提交刷新页面 | 在submit事件处理函数中调用event.preventDefault() |
| 阻止右键默认菜单，显示自定义菜单 | 在contextmenu事件处理函数中调用event.preventDefault() |
| 阻止文本框输入特定字符 | 在keydown/keypress事件处理函数中判断按键，符合条件时调用event.preventDefault() |
| 阻止拖拽元素的默认行为 | 在dragover事件处理函数中调用event.preventDefault() |
掌握JavaScript中阻止默认事件的方法，能够帮助我们更灵活地控制网页的交互逻辑，避免默认行为干扰自定义功能的实现。实际开发中优先使用标准的event.preventDefault()方法，需要兼容旧版浏览器时再补充event.returnValue的处理逻辑即可。
JavaScript阻止默认事件event.preventDefaultevent.returnValue默认行为修改时间：2026-05-29 23:10:46