如何检查冒泡是否触发了vue点击？

Question

假设我在Vue中有此模板：

<p @click="handleParagraphClick">
    <span @click="handleSpanClick">Some text</span>
</p>

当我单击跨度时，也会触发一个段落单击处理程序运行。可以通过这种检查jquery来检查冒泡是否触发了点击：

$('#id_of_p').click(function(event) {
    if (event.target == this) {
        // event was triggered on the body
    }
});

[当我在event.target中使用handleParagraphClick(event)时，我获得了对span元素的引用。如何获得对段落的引用以比较跨度event.target和段落this变量（如jquery）？

Answer 1

您可以使用event.currentTarget来获得带有click事件的元素。作为参考，我找到了答案here。

这可能不是您所需要的，但是如果您不想在单击范围时触发handleParagraphClick，则可以使用@click.stop

new Vue({
  el: "#app",
  methods: {
    onPClick: function(ev) {
      console.log("Current Target: " + ev.currentTarget);
      console.log("Target: " + ev.target);
    }
  }
});

p {
  padding: 10px;
  background: red;
}

span {
  padding: 5px;
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p @click="onPClick">
    P
    <span>
SPAN
</span>
  </p>

</div>