Event Handler Collision

Overlapping queries when adding handlers are hard to catch. In this case, propagation does not work due to it will prevent propagation to the parent not associated listeners

by David Gonzalez

HTML

<div>
            <button id = "button1">
                Button 1
            </button>
            
            <button >
                Form Button 
            </button>
            <button >
                Form Button
            </button>
        </div>

CSS

h1 { font-weight: bold; }

.blue-text{
    color: blue;
    font-weight: bold;
}

.red-text{
    color: red;
}

.white-background{
    background-color: white;
}

JavaScript

let buttonCounter= 0;
let $button1 = $("#button1");

$("button").click( function click(event){
		event.stopPropagation();
    $(this).toggleClass("red-text");
    $(this).toggleClass("white-background");
});

$button1.click( function click(event){
		event.stopPropagation();
    $(this).toggleClass("blue-text");
});