JS、阻止 a 标签的默认点击事件，阻止默认的所有事件

最新推荐文章于 2023-01-13 16:34:53 发布

满舰饰v

最新推荐文章于 2023-01-13 16:34:53 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_40893035/article/details/111206306

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

JS、阻止 a 标签的默认点击事件，阻止默认的所有事件

1 . javascript：void(0) 空处理

缺点：当超链接有target="_blank"属性时，点击后任然会跳出空白页面

  <a href="https://www.baidu.com/" target="_blank">超链接1</a>
  <a href="javascript:void(0);">超链接2</a>
  <a href="javascript:void(0);" target="_blank">超链接3</a>

2 . 重写 onclick

可以解决默认点击事件，也可以保证target="_blank"时，不跳出空白页

  <a href="https://www.baidu.com/" target="_blank">超链接1</a>
  <a href="https://www.baidu.com/" target="_blank" onclick="return false">超链接2</a>

如果你是vue等之类的框架，你可以这样写
使用ref获取，dom再对dom进行操作

// 阻止a标签默认的点击事件
      this.$refs.productIntroduction[0].onclick = function () {
         return false;
      };

3 . css属性中设置 pointer-events: none

可以阻止a标签的所有事件行为，包括点击事件，hover，actived等…
（这个特性有时是优点，有时也是缺点）

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style type="text/css">
    .aWrap {
      pointer-events: none
    }
  </style>
</head>

<body>
  <a class="aWrap" href="https://www.baidu.com/" target="_blank">超链接1</a>
</body>

满舰饰v

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS、阻止 a 标签的默认点击事件，阻止默认的所有事件

JS、阻止 a 标签的默认点击事件，阻止默认的所有事件1 . javascript：void(0) 空处理缺点：当超链接有target="_blank"属性时，点击后任然会跳出空白页面 <a href="https://www.baidu.com/" target="_blank">超链接1</a> <a href="javascript:void(0);">超链接2</a> <a href="javascript:void(0);"
复制链接

扫一扫