Triggers on nested, partially "covered" elements

Data collection and tags
1

Hi All - I have an issue which I assume is common.

Consider this:

<button style="padding:10px"><span>Save</span></button>

If I target the BUTTON element, the trigger will work if I click the outer edge of the button. But if I click in the center of the button, I’m actually clicking the SPAN element and the trigger does not fire. I believe this is because a child element is essentially sitting on top of the parent element.

The only reason IMO that I am able to fire the trigger is because there is padding which exposes the outer edge of the BUTTON so it is not fully covered by the SPAN.

I can solve this by creating a second trigger for the child SPAN and putting both triggers in the same tab. But this is cumbersome :slight_smile:

Have you seen this before? What is the best practice for this type of targeting?

Thanks!

2

Hey @michaelf , Thanks for reaching out!
If you have access to the code, you could insert a unique class to the button and the span element and then create a click trigger that would trigger on this specific class. This would eliminate the hassle of creating 2 different triggers.

<button class="clickme" style="padding:10px"><span class="clickme">Save</span></button>

If you do not have access to the code, then usually you can approach this by creating 2 different triggers like you mentioned above.

If you really want to use only one trigger and do not have access to the code, you can create a custom asynchronous tag and write some javascript to dynamically add the unique class to these elements and then create the trigger for the specific class.