XF 2.3 Weird quirk with buttons and xf-init...

[Jaxel]

I have a button:

    <xf:button href="TEST_LINK" class="button--cta TEST_JS">
        TEST_BUTTON
    </xf:button>

Then in my javascript I have the following:

    XF.Element.register('TEST_JS', 'TEST.ClickButton');

    TEST.ClickButton = XF.Element.newHandler(
    {
        init: function()
        {
            XF.on(this.target, 'click', this.click.bind(this));
        },
      
        click: function(e)
        {
            e.preventDefault();
            console.log(e.target);
        },
    });

The function fires, but the target has a weird quirk.

If I click on the outer edges of the button, the console shows:

<a href="TEST_LINK" class="button button--cta TEST_JS">
    <span class="button-text">
        test
    </span>
</a>

However, if I instead click the text on the button, the console shows:

    <span class="button-text">
        test
    </span>

Why does this happen? Why does the target change depending on where I click the button?
The target should always come from the <a> tag, shouldn't it?

 

[Jeremy P]

Not quite: https://stackoverflow.com/questions...en-currenttarget-property-and-target-property

 

[Jaxel]

Ah! Thank you! That explains it.