默认行为是什么?
览器存在自己的默认行为,默认行为是浏览器的默认初始值。
有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,需要人为去屏蔽浏览器的默认行为
常见的默认行为
1,文本可复制
2,图片可“拖拽”(这是伪拖拽。实际并没有移动,松开鼠标后,会弹出新的链接。)
3,右键显示上下文菜单
4,a标签的默认跳转
为什么要阻止浏览器的默认行为?
为了完成一些特殊的需求,例如右键自定义菜单,禁止复制,a标签的一些操作等,在这些时候我们就需要去屏蔽浏览器的默认行为
阻止浏览器默认行为的方法
1.使用 preventDefault() 方法:在事件处理函数中调用事件对象的 preventDefault() 方法,可以取消事件的默认行为。例如,在点击链接时,可以使用 event.preventDefault() 来阻止浏览器跳转到链接指定的 URL;或者在提交表单时使用 event.preventDefault() 方法阻止表单的默认提交行为。
注意:preventDefault()不适于ie9以下浏览器,需要兼容,而且preventDefault() 方法只能阻止事件的默认行为,它不会停止事件的传播和执行其他的事件处理程序。如果需要完全停止事件的传播,可以使用 stopPropagation() 方法
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
});
阻止默认行为的兼容性写法:
if(e.preventDefault){
//标准浏览器
e.preventDefault()
}else{
//ie低版本
e.returnValue=false;
}
2,返回false:在某些事件处理函数中,可以直接在函数中返回 false 来取消默认行为。例如,在表单的 submit 事件中,可以直接返回 false 来阻止表单提交并刷新页面
注意:这不仅仅阻止默认行为,还阻止冒泡,下手太狠,万能
document.querySelector('form').addEventListener('submit', function() {
// 处理表单数据
return false;
});