Event Handler Collision

Overlapping queries when adding handlers are hard to catch

by David Gonzalez

HTML

<div>
            <button id = "button1">
            <img id = "img1" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAZlBMVEXSPiv////9+PjTQzDVTDr66+n99vXlkIXqpJv88fDaYFDfd2ngeWzWUD/XVUT66Obom5H00s3ki4DtsqrzzcjwvbfURzXZXEvhfnHihHj22NXnl4zxxL7poJbaYlPsraXecGLcaVqDvqZlAAABv0lEQVQ4jX2V6bqCIBCGBxBFrVxxq9Ny/zd5ZoAUBZsfPYCvfcwqsJ1VanoC2nNS1f4JeOu8LsCzos6jYKoGONig0hDU1yNGdtVHMIthZNkO5JczDuDCPfAHh+QGnup66gTq3xyAtmCe0KZQC/96KB1Az8mS3IAkPPZMZ21P1KudhwNI4sCkACh5WtLBTIHf0rOCQiJYoyynX7Ka8p0EIJ4DuwE0jI3uhEpBheCNwQLwwQPhhaKyjFcQgJiyemJ91W6OoIIJoMP16gFpDyE4QWHB9gtiiNLwjoihi3c86D1QR8AE8D4j/f3TnUjGxwgoCDTai3VnZrwMA04gRVcsJE6rUqZviIEJGHfFi3L36BbGPxC1gsJDdm27DhPE7nEOMbVt6KrlCaig2TZUZb2Ig40pCmeUStZH2/Zmy8yZMFNEFhGwdoWLQW87vUjbCGPAmcLFVhjumI8Ge+BimkHejmBmm2vKGf8OnheLtKVrrr3aTL2Y7EEdnRQl7t9H4ehIeRzC7o0Uv2IAWq/eScEfUl6Fk1K1f20HeoP04Q2tcJBilf0Nzpk1/cNfZDQzO+wTxRsX0vFk2FuvuDS5Dz8f/zRTEFvqWuOcAAAAAElFTkSuQmCC"></img>
            </button>            
            <button >
               <img src =...

CSS

h1 { font-weight: bold; }

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

.red-text{
    color: red;
}

.image-border{
  border: 2px solid #E8272C;
}

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

JavaScript

let $img1 = $("#img1");

$img1.click( function click(e){
		event.stopPropagation();
    $(this).toggleClass("image-border");
});

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