Tales From the Other Side: e.stopPropagation();

 Hello Readers,

    Greetings from a chilly November day in New York. The kind of day that forces you to forget that Fall is after Summer, and to remember that Fall is before Winter. The kind of day that makes one glad they spent several years in Vermont and now have several tricks up their sleeve. Namely: warm socks and vigorous walking. But I digress.
    The first 'tale from the other side' that I wanted to share is actually the one I was most excited about (in real time!) when I learned about it. Spoiler alert from the title: it's the event.stopPropagation() javascript method. So...what the heck is it?
    Well, here's a few things about it:

1. It's a native Javascript method, so there's no extra libraries, packages, components, syntaxes, etc to import.
2. It's in the same 'family' as event.preventDefault(), so those familiar with other common event handlers may already have a sense of where it can be called.
3. Think about all the ways you could want your webpage to 'handle' an event; before I knew this was an existing method I could already see a use for it.
   Fun fact: given my own limited knowledge of the libraries of Event Listeners and Event Handlers, etc, I worried that it would be something I needed to build from scratch and began stressing over such an undertaking. Wonders never cease; thankfully somebody thought of it long before me.

    So, what was this use case I encountered? The one that allowed me to see the need for such an Event Handler to exist in the first place? To hammer a point home: I am fairly confident this learning opportunity would not have existed for me if I were not on 'the other side.' Working with the company's product owner, as well as designer, I was asked for a deliverable that was outside of my experience. Namely: I was asked to, in case the product was sold out, disable the onClick functionality in the associated 'Add to Cart' button element - and have no other Event Listener 'handle' the event either.

hastily rendered image to demonstrate the situation, with the bottom button being the object in question

 

    Setting a conditional to eliminate the onClick functionality of the button was simple. Here's what was less simple: getting the button to have no functionality in an environment (ie, the Product 'Card') which had its own, separate onClick functionality covering its entire surface! In trying to figure out how I would attack this problem, I began visualizing the situation in layers: a visual, vertically-oriented representation for the nested HTML tags, and the inherent hierarchy of functionality therein.

like so

    What I needed, I reasoned, was to maybe carve out the chunk of space 'under' the button element, to create some kind of 'Functional Dead Zone'. That way, if the onClick functionality of the element needed to be disabled, the event would not automatically be 'handled' by the element "below" it in the functional hierarchy and the user would see...nothing! A worthy goal indeed

like so

    But, I dreaded: how would I actually go about that?

    Fortunately, before I could waste literally any time, the Senior Engineer on my team turned me on to the brilliant, time-saving(, life-saving?) e.stopPropagation method. It would, he explained, not only prevent the Event Handler from firing on the button element - it would stop any other listening from firing too. ("A functional dead zone?", I thought to myself, in awe).
    One other, somewhat funny thing occurred to me while discussing the problem with the Senior Engineer: he kept referring to DOM events as "bubbling up," and saying that employing e.stopPropagation would stop the event from "bubbling up" the chain of Event Listeners. "No!," I kept thinking, "it would stop the event from burrowing down the layers of HTML elements and functional hierarchy. For the record, I kept this comment to myself, because I certainly got his point. Funny enough, W3Schools describes the Event propagating in both directions, with e.stopPropagation putting an end to any movement. It really is a Functional Dead Zone!

    From there the rest of the component came together like clockwork. With that method I was able to allow the user to experience a Product Card that, when clicked on anywhere, would open the associated modal with that product's information, with the important exception of: if the user clicked on the Add to Cart button, it would add the Product to the Cart. And, as I had set out to achieve: if the Product was Sold Out, and the user clicked on the Add to Cart button...nothing would happen, and the DOM would not open the product information modal!

    It was a very satisfying day for me on the 'other side.' Stay tuned for more tales!