在 Vue 中单击 link 内部时阻止父级的 onclick 事件

Prevent onclick event for parent when link inside is clicked in Vue

vue.js

我有一个盒子作为父元素，还有一些元素在父元素中。我希望能够 select 在点击内部任何地方时这个父级，除了 link。 Link 在我的示例中有效，但问题是父级仍然得到 selected...

<div class="parent" @click="select">
  <div class="text">
  </div>
  <div class="additional">
    <a :href="google.com" class="link" target="_blank">Go to...</a>
  </div>
</div>

v-on:click.stop，针对类似问题建议使用此解决方案，但这可能适用于 div、段落等元素...

查看 Vue.js 文档中的事件修饰符 here，v-on:click.stop 将阻止点击传播或“冒泡”到父元素。

这应该有效：

<a @click.stop :href="google.com" class="link" target="_blank">Go to...</a>

如果还是不行，那么你可以试试这样的方法：

<div class="parent" @click="select">
   <div class="text"></div>
   <div class="additional">
      <a @click.stop="goToUrl" class="link">Go to...</a>
   </div>
</div>

methods: {
    goToUrl() {
        window.location.href = "https://www.google.com/";
    }
}