绑定点击事件到空白/地区一个div使用jQuery

Question

我想拥有jQuery中的空白区域单击/没有内容区域时讲述了一个点击事件：

我有一些带班的DIV：

<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> 
     ¨ 
    <!-- I want to have a function to tell when clicks on "empty area". like here -->  
</div> 
</div> 

我这个尝试：

$("#products-area").on('click', '.products .product', function(){ 
    //Do something when clicked on a product 
}); 

$("#products-area").on('click', '.products', function(){ 
    if (!$(this).hasClass()) { //This obviously doesn't work 
     //Do something when the object click on is not a product or some div inside of the product-div 
     //but it has to be inside of #products-area 
    }    
});  

这就是我想要的东西：

当用户点击产品区域中的某个地方并且它不是产品（并且不是产品div中的某些div）时，请执行一些操作。

我该如何做到这一点？

Answer 1

检查，如果事件的目标是相同的点击的元素.. 试试这个

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

Answer 2

尝试

$("#products-area").on('click', function(e){ 
    var $target = $(e.target); 

    if(!$target.closest('.product').length){ 
     console.log('s') 
    } 
}); 

演示：Fiddle

Answer 3

检查事件target，看看它是否是.product或.product的孩子使用.closest：

$("#products-area").on('click', function(e){ 
    if($(e.target).closest('.product').length > 0) return; 
    alert('no product clicked!'); 
}); 

Demo