Jquery .Clickはすべてのサブディビジョンに適用されますか？

Question

HTML：

<div id="lowerLayer"> 
    <div id="positionLayer"> 
     <div id="imageLayer"> 
      <div id="imageHolder" style="background-image: url('/Images/Loading/ajax-loader.gif');"> 

      </div> 
     </div> 
    </div> 
</div> 

CSS：

#lowerLayer 
{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: Green; 
    cursor: help; 
} 
#positionLayer 
{ 
    position: relative; 
    margin-top: 80px; 
    width: 100%; 
    background-color: Red; 
} 
#imageLayer 
{ 
    position: relative; 
    width: 450px; 
    height: 400px; 
    margin: auto; 
    background-color: Blue; 
    background-image: url('../Images/Large-image-holder.png'); 
} 
#imageHolder 
{ 
    position: absolute; 
    left: 25px; 
    top: 25px; 
    width: 400px; 
    height: 300px; 
    line-height: 300px; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-color: Aqua; 
} 

はJQuery：

$(document).ready(function() { 
     $("#lowerLayer").click(function() { 
      $(this).fadeTo("fast", 0, function() { 
       $(this).hide(0); 
      }); 
     }); 
    }); 
}); 

編集：

クリックイベントがすべてに適用されるように見えることを私たちに持つ問題イムサブディビーズ "#lowerLayer"に適用したいだけです

Answer 1

私は、これはあなたの問題を解決します考える：

$(document).ready(function() { 
     $("#lowerLayer").click(function(e) { 

      // Return if it's a child that's clicked: 
      if (e.target !== this) {return;} 

      // Otherwise continue: 
      $(this).fadeTo("fast", 0, function() { 
       $(this).hide(0); 
      }); 

     }); 
    }); 
}); 

Answer 2

ここで実際の問題には関係ないと思うので、イベントの委任とバブリングを離れることは避けてください。

jQuery hide()メソッドは、要素のスタイルにdisplay: noneを適用します。要素が表示されていない場合、その子孫のいずれも存在しません。同様に、fadeTo()は、要素の子孫にも影響する不透明度を減らします。