Vue @click 不适用于存在 href 的锚标记

Posted 2023-02-22

【中文标题】Vue @click 不适用于存在 href 的锚标记

【英文标题】：Vue @click doesn't work on an anchor tag with href present

【发布时间】：2019-03-24 19:54:49

【问题描述】：

编辑：我忘了澄清，我正在寻找的是知道如何编写一个带有 href 属性的锚标记，但是当点击元素时，应该忽略 href 并且应该执行点击处理程序.

我目前正在使用 Vue 1，我的代码如下所示：

<div v-if="!hasPage(category.code)">
  <div>
    <template v-for="subcategoryList in subcategoryLists[$index]" >
      <ul>
        <li v-for="subcategory in subcategoryList"v-on:click.stop="test()">
          <a :href="subcategory.url">subcategory.label</a>
        </li>
      </ul>
    </template>
  </div>
</div>

我要做的是向用户展示一些代表我网站类别的按钮，其中一些按钮将引导用户到另一个页面，而其他按钮将在单击这些子类别时切换带有子类别列表的下拉列表您将被带到子类别的页面。

这些将非常简单，但这些按钮需要由 Google 跟踪代码管理器跟踪，所以这就是我使用 @click 属性调用函数并忽略 href 属性的原因。这不起作用，我试过@click.prevent、@click.stop、@click.stop.prevent，但这些都不起作用。

问题是，如果我删除 href 属性，@click 方法效果很好，但 SEO 要求是在每个链接上都有 href 属性。

任何帮助将不胜感激。

【问题讨论】：

如果把点击事件放在锚标签上呢？

您能区分通向另一个页面的按钮和切换下拉列表的按钮吗？

@boussadjrabrahim 我省略了第一个按钮，因为代码有点长并且与此分开。我应该指定我显示的代码只是负责子类别按钮的部分，在我看来这应该很简单，因为这是简单的锚标签，需要带有有效 url 的 href，但点击时应该触发一个函数而不是导航。

@RichyST 请在jsfiddle或codesandbox中分享运行代码sn-p

@DanOswalt 在这种情况下也没有任何反应，我已经尝试了点击处理程序的不同位置，但除非我删除 href，否则似乎没有任何工作。

【参考方案1】：

正如在 cmets 中指定的 @dan-oswalt，您必须在与 href 相同的元素上添加 click 事件。它在您尝试的时间不起作用的原因很可能是因为您尝试使用 @click.stop 仅停止传播，而不是默认操作。 （重定向到链接）。你想要的是防止浏览器重定向用户：@click.prevent

new Vue(
  el: '#app',
  data: 
    subcategoryList: Array(10).fill(
        url: 'http://google.com',
        label: 'http://google.com'
    )
  ,
  methods: 
    test(event) 
      event.target.style.color = "salmon"
    
  
)
Vue.config.devtools = false
Vue.config.productionTip = false

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<main id="app">
<template>
  <ul>
    <li v-for="subcategory in subcategoryList">
      <a :href="subcategory.url" v-on:click.prevent="test($event)">subcategory.label</a>
    </li>
 </ul>
</template>
</main>