e.preventDefault() 是在 JavaScript 事件处理程序中使用的方法,用于阻止事件的默认行为发生。通常在响应用户操作(如点击链接或提交表单)时使用,你可以使用它来覆盖与该事件关联的默认操作。
通过调用 e.preventDefault(),你可以停止事件的默认行为,例如跟随链接或提交表单,从而允许你执行自定义操作。
应用场景
1、防止表单提交
<form id="my-form">
<input type="text" id="my-input">
<button id="my-button">提交</button>
</form>
<script>
document.getElementById("my-form").addEventListener("submit", function(event) {
event.preventDefault();
console.log("表单提交已被阻止");
});
</script>
上面给出的代码中,使用addEventListener()方法监听表单的submit事件,并在回调函数中调用event.preventDefault()方法阻止默认提交事件。在这个示例中,事件被阻止后,控制台会输出“表单提交已被阻止”。
2、防止Anchor标签的跳转
<a href="https://www.baidu.com" id="my-link">链接</a>
<script>
document.getElementById("my-link").addEventListener("click", function(event) {
event.preventDefault();
console.log("跳转已被阻止");
});
</script>
上面给出的代码中,使用addEventListener()方法监听Anchor标签的click事件,并在回调函数中调用event.preventDefault()方法阻止默认跳转事件。在这个示例中,事件被阻止后,控制台会输出“跳转已被阻止”。
事件冒泡和e.preventdefault()的关系
事件冒泡是指事件被触发后,会自动向父元素传播。也就是说,如果在一个子元素上绑定了某个事件,当事件被触发后,该事件会向父元素一级一级地传播。直到传到document对象才停止。
在事件冒泡的过程中,如果同时使用了e.preventdefault()和e.stopPropagation(),则事件的默认行为会被阻止,并且不会再传播到父元素上。
<div id="my-parent">
<div id="my-child">点击我</div>
</div>
<script>
document.getElementById("my-child").addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
console.log("事件传播已被阻止");
});
</script>
上面给出的代码中,使用addEventListener()方法监听子元素的click事件,并在回调函数中对事件进行了阻止。
同时,使用event.stopPropagation()方法阻止事件冒泡,保证事件不会传播到父元素上。