Charlie Sheather Charlie Sheather - 16 days ago 7
jQuery Question

jQuery - Bind click to all elements excluding class?

am trying to bind a click to all elements that don't have a specific class.

I tried the following and after some googleing, it looks like it the right thing to do.

$('*:not(.class)').click(function() {
alert('Clicked...');
});

$(':not(.class)').click(function() {
alert('Clicked...');
});


Now, what I've just realised while writing this is that elements are layered on top of other elements, and all the elements under a click trigger a click too? Is this correct? I think it is as when the following code is executed I would get between 3 and 6 "clicks" per click.

$('*').click(function() {
console.log('click');
});


Does anyone have any light to shed?

EDIT (Already): Ive just thought of a workaround, as follows:

$('*').click(function() {
if ($(this).hasClass('class')) {
console.log('click');
return false;
} else {
console.log('click');
}
});


LOGIC: This "class" element will be the top layered element and therefore will trigger the first click (theory-crafting) therefore is it has the class we return/break;

Answer

Use stopPropagation. This will prevent all elements below the clicked item from firing as well.

$('*:not(.class)').click(function(event) {
    event.stopPropagation();
    alert('Clicked...');
});