vue 2.0 @click.self does not trigger - Stack Overflow

Question

vue 2.0 Why is the event not triggered when using @click.self to bind itself?

Scenario:
Mobile terminal development, click on the mask layer to close the pop-up window, but the p box on the mask layer cannot be triggered, that is, the parent is triggered, and the event will not be passed to the child

Vue provides a .self modifier. It has been used before, but it suddenly doesn’t work this time. I don’t know what happened. . .

Answer 1

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<p v-on:click.self="close" ref="pop">
    <button></button>
</p>

<!--

给组件绑定原生事件

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 

-->

<my-component v-on:click.native.self="close"></my-component>

close(e) {
    console.log(e.target)
    this.$refs.pop.style.display = 'none'
}

Answer 2

Is your p box a sub-component? If it is a sub-component, I guess you need to add @click.native. The official document has it, search it.

Answer 3

@click.native.self