当前位置: 首页>前端>正文

阻止a标签跳转的方法

​ 通常使用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()
      }
    
  • (不推荐)使用 (#)

    总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉。

    <a href="#">点击</a>
    

https://www.xamrdz.com/web/2de1849031.html

相关文章: