Anchor tag fire before button in Product Card

VTEX in your native language 🌎 Portuguese
, ,
1

Good morning everyone,

I’m developing the storefront for the search results page, and in the product cards we need to implement a “button” to copy the coupon. So looking at the HTML structure, we have an “anchor tag” that wraps the entire product card so that clicking on it redirects to the product, and we have a “button” that is a descendant of the <a> tag.

<a href=".../p">
    ...
    <button></button>
</a>

By default DOM behavior, you’d expect that clicking the “button” triggers its own function and, if I don’t use stopPropagation, then proceeds with the redirect from the <a> tag. That’s the standard behavior. However, in this native VTEX component the behavior is exactly the opposite: it fires the <a> event first and then fires the “button” event.

Do you know why this happens and how I can prevent it?

2

Hey @guycanella, how’s it going?

If adding stopPropagation() to your button’s click event didn’t fix it, what if you moved the button outside the <a></a> tag and then used CSS to position it inside the card?