Question

<div id="main">
hello world
<div id="second-div">
bye
</div>
</div>

jQuery('#main:not(second-div)').click(function() {
alert('works!');
});

I want to detect mouse click on the “main” div, but the click event shouldn’t trigger when I click on the “second-div” div.
I’ve tried using “:not(second-div)” but the click triggers anyway.

Answer 1

You could check the target property of the event. (Edited to reflect the improvement proposal from the comment)

jQuery('#main').click(function(e) {
    if(e.target===this) {
        alert("works!");
    }
});​

http://jsfiddle.net/rZeXa/