Working with stacked elements on a page, some that are anchors, and others that are elements with event handlers can sometimes cause weird behavior.
Ultimately, it all has to do with event propagation, but if you’ve not had to deal with that (or event bubbling or anything like that), it can be a bit of a challenge.
And here’s an example: What if you have an image that is wrapped in an anchor. What happens when you a dynamic element that’s placed via JavaScript after the page loads that loads another dynamic element? On top of that, you want to stop the page from redirecting when the dynamic element is clicked but still direct when the image is clicked?
It might sound simple – and in some cases it is – but if you have a transparent element overlaying the entire, original image it can become a whole other challenge.
This is where understanding event targets come into play. But before going into how to solve it, I’ll try to distill everything down into a simpler explanation and diagram out how it’s rendered in the DOM.
Dynamic Elements, Static Elements, and Event Handlers
So try to imaging this: You have…
- A page that has an image and the image is wrapped in an anchor that will take you to, say, another page.
- When the page loads, two dynamic elements are created. When the first is clicked, it should display the second dynamic element.
- When the first dynamic is clicked, it should not redirect the page.
- When the original image is clicked, it should behave as expected.
The tough part of this is that the dynamic elements are placed on top of the existing anchor and image combination.
A Look at the DOM
This means the DOM would look something like this:
Note in the image above the anchor triggers the image, and the dynamic element triggers the dynamic overlay.
So how do we go about displaying the second dynamic element when the first clicked without navigating away from the page? You can do this by examining the target of the event that was triggered.
The Code for Handling Events
I’ll be using jQuery below since most of my readers work with WordPress and WordPress ships with jQuery, but this can also be handled with vanilla JavaScript (but trying to go down that road is more than I’m willing to explain in this particular post).
With that said, here’s the gist of which I’ll explain what’s going on with the code:
First, I’m making the assumption there are multiple dynamic elements hence the reason for the each iterator.
Next, it creates a reference to the anchor element that’s a parent of the current instance of the dynamic element (using var here is important so that it always refers to the element that’s the parent of the current instance of the iteration versus overwriting a previous instance).
When the element is clicked, we setup a click handler so that we can take a look at the target of the event of the click event. This is where it gets a bit confusing.
We have e and evt variables each of which refer to the event handler for a specific element. In the code above:
- e refers to the event tied to our dynamic element,
- evt refers to the element but will also affect the event bubbling process meaning that it’ll trigger events throughout the rest of the DOM.
And thus, in our conditional, we evaluate the target of the first event handler to make sure it doesn’t match the specific element. From there, as you can see in the code comment, you can determine how you want to proceed (like maybe going ahead and letting it navigate elsewhere or do something else).
Ultimately it’s your call. But when you get in a bind of dynamic elements, static elements, and event handlers, it can get complicated quickly.