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
    }            
});

これは私が欲しいものです:

ユーザーがproducts-areaのどこかをクリックし、それが製品ではない場合（およびproduct-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

イベントを調べて、それがusingのまたは子であるかtargetどうかを確認します。.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 に答える