HTML:浏览器的默认行为--阻止浏览器的默认行为

默认行为是什么?

览器存在自己的默认行为,默认行为是浏览器的默认初始值。

有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,需要人为去屏蔽浏览器的默认行为

常见的默认行为

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;
});

最近更新

  1. TCP协议是安全的吗?

    2024-04-07 20:12:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-07 20:12:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-07 20:12:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-07 20:12:03       20 阅读

热门阅读

  1. 嵌入式技术主要包括什么?

    2024-04-07 20:12:03       16 阅读
  2. mysql存储引擎

    2024-04-07 20:12:03       17 阅读
  3. 鸿蒙组件学习_Image组件

    2024-04-07 20:12:03       16 阅读
  4. 如何找出公司间存在关联关系?

    2024-04-07 20:12:03       18 阅读
  5. 【安全】数据安全产品概览

    2024-04-07 20:12:03       13 阅读
  6. Python—容器

    2024-04-07 20:12:03       16 阅读
  7. [xboard]real6410-3 S3C6410光盘资料与功能测试

    2024-04-07 20:12:03       15 阅读
  8. 力扣(数组)分发饼干

    2024-04-07 20:12:03       11 阅读
  9. vue-router v4.x命名路由,编程式跳转

    2024-04-07 20:12:03       14 阅读
  10. 独孤思维:1小时卖了80单

    2024-04-07 20:12:03       14 阅读
  11. shell脚本规范及变量类型、置换

    2024-04-07 20:12:03       17 阅读