浏览器以及HTML元素提供了一些默认行为, 也可以称作默认事件
默认行为
a标签点击跳转
<a>标签在href存在的情况下会点击自动跳转链接或者定位锚点, 通过对<a>对监听事件阻止默认行为后, 点击链接不会跳转
<a href="url" 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.prevenDefault();
})
</script>
input输入
在<input>或者<textarea>获得焦点时敲击键盘会自动输入, 阻止默认行为后, 敲击键盘将不会输入, 可以在这个事件监听下作输入数据过滤, 例如只允许输入数字
<input id="t3" />
<script type="text/javascript">
document.getElementById("t3").addEventListtener("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>或者是<button>都会触发表单的提交, 阻止默认行为后表单不会自动提交
<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级模型中有效. 此外, 在jQuety中使用return false会同时阻止默认行为与事件传播
