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

曾经终败给现在 2022-12-28 07:17 224阅读 0赞

## 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

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

JS、阻止 a 标签的默认点击事件，阻止默认的所有事件 1 . javascript：void(0) 空处理缺点：当超链接有`target="_blank"`属性

曾经终败给现在/ 2022年12月28日 07:17/ 0 赞/ 225 阅读

相关阻止点击事件

使用css样式阻止元素的点击事件 `.el{ pointer-events:none; }` 转载于:https://www.cnblogs.com/yinshiru/p

野性酷女/ 2022年10月02日 14:58/ 0 赞/ 182 阅读

相关 js 阻断事件传播及阻止默认事件

阻止事件冒泡，不触发父元素事件 function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器

快来打我*/ 2022年06月13日 06:07/ 0 赞/ 185 阅读

相关 js中阻止事件冒泡与阻止事件默认行为

一、冒泡事件我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。那么如何有效的阻止冒泡事件的发生？其实在非I

雨点打透心脏的1/2处/ 2022年05月30日 06:13/ 0 赞/ 285 阅读

相关事件流阻止元素默认事件

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。事件流的分类： 1.冒泡型事件流（所有浏览器都支持）

浅浅的花香味﹌/ 2022年05月17日 13:42/ 0 赞/ 214 阅读

相关详解javascript如何阻止冒泡事件及阻止默认事件

一、事件冒泡二、默认行为在说事件冒泡之前，我们先说说事件对象（Event） Event 1、在触发DOM上某个事件时，会产生一

雨点打透心脏的1/2处/ 2022年05月12日 01:48/ 0 赞/ 297 阅读

相关 js阻止默认事件（a标签跳转），阻止事件冒泡

最近刚学习完js基础，今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记，于是写这篇文章算是做一个总结，也是加深一下印象。 1.阻止默认事件在html中有很多自带

曾经终败给现在/ 2022年01月26日 01:15/ 0 赞/ 458 阅读

相关 JS阻止事件冒泡和默认事件

本文转载自掘金中我的小伙伴的一篇文章：[https://juejin.im/post/5bf7ad096fb9a049ed308353][https_juejin.im_pos

妖狐艹你老母/ 2021年11月22日 12:46/ 0 赞/ 422 阅读

相关 js 取消冒泡和阻止默认事件

取消冒泡 function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.sto

雨点打透心脏的1/2处/ 2021年10月23日 22:42/ 0 赞/ 351 阅读

相关 jQuery--事件对象event详解、阻止默认事件、阻止事件冒泡

事件对象由于标准DOM和IE-DOM所提供的事件对象的方法有所不同，导致使用JavaScript在不同的浏览器中获取事件对象比较繁琐。jQuery针对该问题进行了必要的

秒速五厘米/ 2021年08月14日 01:54/ 0 赞/ 563 阅读