Interaction event propagation

How To
1

Hey, guys!

This might be super specific, but maybe this discussion will help others in the future.

I have a query loop of a custom post type. The query item template itself has as interaction that calls a custom JS function. All is working great. However, now I need to add a button inside the query item template that calls a lightbox image. Problem is, naturally, the interaction on the loop item template is propagating to the button - and, while the button does open the lightbox, it also calls the function, which is not intended to happen.

I’ve tried using e.stopPropagation() on the button, but the lightbox breaks up.

Any ideas?

Thanks,
Caio Frison

2

Solved! For anyone facing the same obstacle:

I was able to solve this by placing the lightbox button inside of a div and then adding the stopPropagation() to the div instead of the button. This way the propagation of the query item interaction stops and the button still works as intended.