[vue]怎么使a的href不跳转

帅动的笑脸
  • 17

怎么在a标签里,使用href,但是在click的时候不跳转到href里,就是怎么拦截跳转的操作,执行click里的事件

<a :href="url"
           @click.stop.self="click">{{value}}</a>


data(){
  return {
    url: "http://www.baidu.com",
    value: "baidu"
  };
},
methods: {
    click(e) {
        this.$emit("click", {
            title: this.value,
            url: this.url,
        });
        e.stopPropagation();
        return false;
    }
}

期望结果是没有跳转到baidu.com上,而是执行this.$emit("click")

回复
阅读 11.1k
7 个回答
✓ 已被采纳

preventDefault

既然你不想跳转那么为什么要a标签,href中url没有任何意义。
如果开始就不要这个跳转功能的话,要不你尝试pointer-events: none;
个人建议为了语义化和维护性,建议不要使用带有具体功能语义的标签,有时候会触发很多意想不到的效果,就比如你这个代码,在不同的机型中,显示的效果是不一样的。有的跳转优先,有的点击事件优先,这个权重问题我们应该尽量避免。

methods: {

//...
prevent(event){
    event.preventDefault()
    // do something you want
}

}

    <a href="http://www.baidu.com" onClick="test02()">点击弹框,右键跳转</a>
    <script>
      function test02 (ev) {
        ev = ev || window.event;
        window.event? window.event.returnValue = false : ev.preventDefault();
        console.log('被点击了')
      }
    </script>
fushilu
  • 2
新手上路,请多包涵

亲测有效: https://stackoverflow.com/que...

<a
                :title="item.name"
                :href="getDocPath(item)"
                @click.prevent.stop="onClick(item, 'click')"
                

<el-link
                :title="item.name"
                :href="getDocPath(item)"
                @click.native.prevent.stop="onClick(item, 'click')"
宣传栏