如何检查冒泡是否触发了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
    }
});

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

更新。

上面的模板是我当前代码的简化版本。我有嵌套组件。带跨度的组件在段落组件中呈现。

Answer 1

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

这可能不是你需要的，但如果你不想在点击 span 时触发 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>