jquery - 使用 jQuery 将点击事件绑定到 div 中的空白空间/区域

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

检查事件target并查看它是using的一个.product还是子级：.product.closest

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

演示

Answer 3

尝试

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

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

演示：小提琴