jquery - checking if element is clicking and sub-elements aren't clicked

Question

I have this html code:

<div id="area">Click me <span id="forbidden">Hi Guys</span></div>

I would like to do check if only #area clicked, but not the area of forbidden, eventhough it is inside the div "area".

Thanks in advance, Daniel.

Answer 1

The .target property of the event object will give you the DOM element that initiated the event:

$("#area").click(function(e) {
   if (e.target.id != "forbidden") {
       // do something
   }
});

Answer 2

Another approach would be to use the stopPropagation on the forbidden element.

$('#area').click(function(){
  // not forbidden
});


$('#forbidden').click(function(e){
    e.stopPropagation();
});