时间戳

首页 > 解决方案 > vuejs针对所有锚标记onclick

vue.js - vuejs针对所有锚标记onclick

问题描述

我想在单击任何锚标记时调用一个方法。不可能在所有元素上定义@click或定义。v-on

<a href="#">link1<a>
<a href="#">link2<a>
<a href="#">link3<a>
<a href="#">link4<a>
<a href="#">link5<a>

在 jquery 我可以做到这一点

$('a').click(function(){
   //........
});

如何在 vuejs 中实现它

注意：我的应用程序中有 10 多个组件，a标签分布在组件的每个地方。

标签： vue.js

解决方案

您可以在父/容器元素上附加点击处理程序，并通过以下方式检测目标/子元素被点击event.target：

new Vue({
  el: '#app',

  methods: {
    clicked(e) {
      const container = e.currentTarget; // FYI
      const anchor = e.target;
      
      console.log(`${anchor.innerHTML} was clicked!`);
    }
  }
})

Vue.config.devtools = false;
Vue.config.productionTip = false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="container" @click="clicked">
    <a href="#">Link #1</a>
    <a href="#">Link #2</a>
    <a href="#">Link #3</a>

    <!-- more anchor elements here -->
  </div>
</div>

推荐阅读