Question

I’m creating a template generator using hover and click events on added elements. Long story short: When I click or hover over a sibling of an element, it runs all events starting with the deepest sibling and ending up with the “highest” parent.

I’ve managed to find a solution even though I consider it pretty dirty:

var childclicked = false;

$('.container > .column').click(function(event) {
    // do stuff
   childclicked = true;
});

$('.container').click(function(event) {
    // preventing code to be executed
    if(!childclicked) {
        // do stuff
    }
});

Because the sibling’s event handler is called first it sets a variable that has to be checked in the parent’s event handler.

Isn’t there a better way to just exclude siblings?

Answer 1

I guess you just need to stop the events from bubbling. You can easily achieve that by either calling explicitly

event.stopPropagation();

or by returning false from within the event handler itself. Returning false implicity calls .stopPropagation() and .preventDefault().