Stop event propogation

The HTML :

<button
	type="button"
	@click="deleteRule($event)"
>
<svg ... />
</svg>
</button>

AlpineJS’s x-data :

deleteRule: function(event)
{
    console.log(event.target);
},

event.target outputs either [object HTMLButtonElement] or [object SVGPathElement]

How do I get only one ? Say [object HTMLButtonElement]

use currentTarget instead possibly?

deleteRule: function(event)
{
    console.log(event.currentTarget);
},
1 Like

Details about currentTarget are at https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
and there’s easy access from there to other event properties as well.

3 Likes

The svg element is a child of the button element so add the event listener to the button element.
Then in the event listener

deleteRule: function(event)
{
        event.preventDefault();
        event.stopPropagation();
        let tgt = event.target;
        while(tgt.tagName !== 'BUTTON') {
            tgt = tgt.parentElement;
        }

        //  continue here

    console.log(tgt);
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.