默认行为及阻止
默认行为及阻止
浏览器以及HTML元素提供了一些默认行为，也可以称作默认事件。
默认行为#
a标签点击跳转#
<a>标签在href存在的情况下会点击自动跳转链接或者定位锚点，通过对<a>的监听事件阻止默认行为后，点击链接不会跳转。
<a href="https://blog.touchczy.top" id="t1">点击跳转链接</a>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click", (e) => {
e.preventDefault();
})
</script>
鼠标右击显示菜单#
在浏览器页面中鼠标右击会显示菜单，通过对document的监听事件阻止默认行为后，右击页面不会弹出菜单，当然也可以通过监听并组织默认行为制作自定义右键菜单。
<script type="text/javascript">
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
})
</script>
input输入#
在<input>或者<textarea>获得焦点时敲击键盘会自动输入，阻止默认行为后，敲击键盘将不会输入，可以在这个事件监听下作输入数据过滤，例如只允许输入数字。
<input id="t3" />
<script type="text/javascript">
document.getElementById("t3").addEventListener("keydown", (e) => {
e.preventDefault();
})
</script>
复选框选中#
复选框的默认行为下是点击选中获取取消选中，阻止默认行为后，点击将不会改变目前状态。
<input id="t4" type="checkbox" />
<script type="text/javascript">
document.getElementById("t4").addEventListener("click", (e) => {
e.preventDefault();
})
</script>
表单提交#
表单中若是存在type为submit的<input>或者是<buttton>都会触发表单的提交，阻止默认行为后表单不会自动提交。
<form action="./" id="t5">
<input type="submit" name="btn" />
</form>
<script type="text/javascript">
document.getElementById("t5").addEventListener("submit", (e) => {
e.preventDefault();
})
</script>
阻止默认行为#
W3C推荐的阻止默认行为的方式是event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。IE8及之前的浏览器阻止默认行为需要使用window.event.returnValue = false。- 直接在事件处理函数中
return false也能阻止默认行为，只在DOM0级模型中有效。此外，在jQuery中使用return false会同时阻止默认行为与事件传播。
示例代码#
<!DOCTYPE html>
<html>
<head>
<title>默认行为及阻止</title>
</head>
<body>
<a href="https://blog.touchczy.top" id="t1">点击跳转链接</a>
<input id="t3" />
<input id="t4" type="checkbox" />
<form action="/" id="t5">
<input type="submit" name="btn" />
</form>
<a href="https://blog.touchczy.top" id="t6">点击跳转链接</a>
</body>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click", (e) => {
e.preventDefault();
})
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
})
document.getElementById("t3").addEventListener("keydown", (e) => {
e.preventDefault();
})
document.getElementById("t4").addEventListener("click", (e) => {
e.preventDefault();
})
document.getElementById("t5").addEventListener("click", (e) => {
e.preventDefault();
})
document.getElementById("t6").onclick = (e) => {
return false;
}
</script>
</html>
每日一题#
https://github.com/WindrunnerMax/EveryDay
参考#
https://segmentfault.com/a/1190000007681900
http://www.imooc.com/article/259535?block_id=tuijian_wz
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理