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

Jaxel

Well-known member
I have a button:
Code:
    <xf:button href="TEST_LINK" class="button--cta TEST_JS">
        TEST_BUTTON
    </xf:button>

Then in my javascript I have the following:
Code:
    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:
Code:
<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:
Code:
    <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?
 
Back
Top Bottom