阻止a标签跳转的方法

原创已于 2024-03-01 11:26:08 修改 · 3.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2024-02-29 11:15:15 首次发布

javascript 专栏收录该内容

23 篇文章

订阅专栏

博客介绍了阻止a标签跳转的几种方法。推荐的方法有：在href里写javascript:void(0)；让onclick事件返回false；使用@click.prevent并将href置空。不推荐使用href='#'，因为它会跳转到当前页面顶部，内容多时有跳转感。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常使用a标签是为了做跳转，有时候我们也可以拿来做点击的效果，但需要阻止它跳转，因此引申出以下的几种方法：

(推荐）href里写 javascript: 这个是最常用的方法，京东也是使用该方法，这里是的意思是这次点击又JavaScript处理，处理的方式是无/伪协议，如果我们后面写个alert() 就代表alert()处理，其次写其他也一样
```
<a href="javascript:">点击</a>
<a href="javascript:void(0)">点击</a>
```

(推荐）onclick事件返回false，直接做截断了，后面不会执行

<a href="http://www.baidu.com" onclick="return false">点击</a>

(推荐）@click.prevent 阻止事件的默认行为，href必须为空

// 案例1：
<a href="" @click.prevent>点击</a>
// 案例2：
<a href="http://www.baidu.com" >点击</a>
let a = document.querySelector('a')
a.onclick = function(e){
	e.preventDefault()
  }