preventDefault() 事件方法
JavaScript基础 2022-06-08 12:06:28小码哥的IT人生shichen
preventDefault() 事件方法
实例
防止链接打开 URL：
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
完整实例：
<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" href="http://www.phpcodeweb.com/">访问 phpcodeweb.com.cn</a>
<p>preventDefault() 方法将阻止上面的链接跟随 URL。</p>
<script>
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。
举例，在以下情况下有用：
- 单击“提交”按钮，阻止其提交表单
- 单击链接，防止链接跟随 URL
注释：并非所有活动都可以取消。请使用 cancelable 属性 来确定事件是否可取消。
注释：preventDefault() 方法不会阻止事件通过 DOM 进一步传播。请使用 stopPropagation() 方法来解决。
浏览器支持
表格中的数字注明了完全支持该方法的首个浏览器版本。
| 方法 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| preventDefault() | 支持 | 9.0 | 支持 | 支持 | 支持 |
语法
event.preventDefault()
参数
无
技术细节
| 返回值： | 无返回值。 |
|---|---|
| DOM 版本： | DOM Level 2 Events |
更多实例
防止复选框的默认操作：
document.getElementById("myCheckbox").addEventListener("click", function(event){
event.preventDefault()
});
完整实例：
<!DOCTYPE html>
<html>
<body>
请尝试选中此框：<input type="checkbox" id="myCheckbox">
<p>切换复选框是单击复选框的默认操作。 preventDefault() 方法可以防止这种情况发生。</p>
<script>
document.getElementById("myCheckbox").addEventListener("click", function(event){
event.preventDefault()
});
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
