Jaxel
Well-known member
I have a button:
Then in my javascript I have the following:
The function fires, but the
If I click on the outer edges of the button, the console shows:
However, if I instead click the text on the button, the console shows:
Why does this happen? Why does the target change depending on where I click the button?
The target should always come from the
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?