Привязать clicked-событие к пустому пространству / области в div с помощью jQuery

Question

Я хочу иметь click-событие в 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 и посмотреть, если это .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')
    }
});  

Демо: скрипка