Bind clicked-event to empty space/area in a div with jQuery -

i want have click-event in jquery tells when clicked on empty area/no content-area:

i have divs classes:

<div id="products-area"> <div class="products">     <div class="product">         <div class="image-wrapper"></div>         <div class="handles"></div>     </div>     <div class="product">         <div class="image-wrapper"></div>         <div class="handles"></div>     </div>       ¨     <!-- want have function tell when clicks on "empty area". here -->     </div> </div> 

i've tried this:

$("#products-area").on('click', '.products .product', function(){     //do when clicked on product });     $("#products-area").on('click', '.products', function(){     if (!$(this).hasclass()) { //this doesn't work         //do when object click on not product or div inside of product-div         //but has inside of #products-area     }             });      

this want:

when user clicks somewhere in products-area , not product (and not of divs inside of product-div), something.

how achieve that?

check if events target same clicked element.. try this

$("#products-area").on('click', '.products', function(e){    if(e.target == this){      //do something...    } });