Vue @click.stop 仍然获取子组件答案

【问题标题】：Vue @click.stop still getting the child componentVue @click.stop 仍然获取子组件
【发布时间】：2022-01-24 09:30:30
【问题描述】：

我想获取父组件的子元素。

<div
    v-on:click.stop.prevent="onClickTemplateHandler">
    <div>
    <h3 style="">Title</h3>
    <p>{{ lorem }}</p>
    </div>
</div>


...


onClickTemplateHandler(e) {
    console.log(e)
    const innerHTML = e.target.innerHTML
    if (innerHTML) {
      this.value += innerHTML
    }
}

我尝试使用.self，但我仍然希望 div 的内部是可点击的

但是，当我单击 div 的内部时，我将子对象而不是父对象作为目标。

对这个有什么建议吗？

谢谢！

【问题讨论】：

控制台登录什么？而你期待什么呢？在您edit 这些输出之后，我们可以提供更好的帮助。
嗨。谢谢你的评论。我通过放置一个叠加层来解决这个问题。我发布了我的答案。
javascript.info/event-delegation

标签： javascript vue.js

【解决方案1】：

我做了一些解决方法

<div>
    <div class="overlay" v-on:click.stop.prevent="onClickTemplateHandler"></div>
    <div>
      <h3 style="padding: 10px;text-align: center;">Header</h3>
    </div>
</div>


...

onClickTemplateHandler(e) {
    const innerHTML = e.target.nextElementSibling.innerHTML
    if (innerHTML) {
      this.value += innerHTML
    }
}

...

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 2;
    top: 0px;
    cursor: pointer;
}

【讨论】：