@click.capture is not working for me.

[heppa]

Dear all,

I have a relatively simple code and I would like to have the event trigger only on the parent (or the element I actually put the @click on):
To my understanding, capture should "start top-down" instead of the default bottom-up (bubbling).

<template>
<button @click.capture.stop="callFunction">
  <div id="child"></div> 
</button>
</template>

<script setup>
function callFunction (event) {
  console.log(event.target) // This will always be the child div.
}
<script>

Is this normal, am I missing something or is the capture buggy?

(checked in latest chrome and firefox)

[LinusBorg]

The code is working as expected, by event.target gives you the element that caused the event, which is the div, as that was what you clicked on.

What you want is event.currentTarget, which is the element that the event handler was attached to.

The currentTarget read-only property of the Event interface identifies the element to which the event handler has been attached.

This will not always be the same as the element on which the event was fired, because the event may have fired on a descendant of the element with the handler, and then bubbled up to the element with the handler. The element on which the event was fired is given by Event.target.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

[heppa]

indeed => I actually always used this, but I investigated the event, and the currentTarget was not set. However, I believe this might have been due to an other issue I had ;/

Thanks!