0

我想在 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)时,请执行一些操作。

我该如何做到这一点?

4

3 回答 3

3

检查事件目标是否与单击的元素相同。试试这个

$("#products-area").on('click', '.products', function(e){
   if(e.target == this){
     //do something...
   }
});
于 2013-07-11T06:06:08.867 回答
1

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

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

演示

于 2013-07-11T06:09:43.073 回答
0

尝试

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

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

演示:小提琴

于 2013-07-11T06:05:32.770 回答