Question

如果我点击i标记内的li标记，只会触发goTo()函数，而不会触发byebye()函数。

是否有一种简单的方法来确定是单击li还是a标签？

<ul>
  <li @click="goTo(list)">
    Check me up! <i @click="byebye(list)" class="fas fa-ban"></i>
  </li> 
</ul>

Answer 1

一种解决方法是调用一个函数，然后再调用另外两个函数。因此，您先呼叫goToAndByeBye(list)，然后再呼叫goTo()和byebye(list)。

我相信您也可以像这样分开两个函数调用：

<i @click="byebye(list); gotTo()">

如果您想弄清楚事件是从哪个元素调用的，请考虑在HTML函数调用中将$ event作为参数传递，其中将包含有关调用元素的信息。

Answer 2

根据我的评论：您可以使用event modifier, .stop来防止click事件冒充<li>父对象：请参见概念证明：

new Vue({
  el: '#app',
  methods: {
    goTo: function() {
      console.log('goTo');
    },
    byebye: function() {
      console.log('byebye');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li @click="goTo()">
      Check me up! <i @click.stop="byebye()" class="fas fa-ban">ICON</i>
    </li>
  </ul>
</div>

有没有办法对li元素使用多个动作？

2 个答案: