的jQuery的点击次数，但不能在孩子单击

Question

我试图创建一个小的20x20px DIV中，当点击时打开位于第一箱内200x200px框：

HTML

<div id="container" style="width:20px; height:20px;"> 
    <div id="box" style="display:none;width:200px; height:200px;"> 
     <img src="example1.gif" /> 
     <img src="example2.gif" /> 
    </div> 
</div> 

目的

我的目标是做起来很点击#container时，#box被褪，然后用户会点击这个盒子里的图像和#box将会淡出。

1. #container点击和#box#boxfadeIn();
2. 项目被点击
3. #box​​

要做到这一点，我用下面的jQuery：

$(document).on("click", "#container", function(){ 

    $("#box").fadeIn("fast"); 
}); 

$(document).on("mouseleave", "#box", function(){ 

    $("#box").fadeOut("fast"); 
}); 

$(document).on("click", "#box img", function(){ 

    // Do things, removed for example 

    $("#box").fadeOut();   
}); 

实际发生的

在它不工作，但因为这种情况发生的那一刻：

1. 点击#container
2. #box衰在
3. 点击#box img
4. //做的事情，对于去除示例
5. #box淡出
个
6. #box衰在

号码6.上述名单上不应该发生，盒子不应褪色回。

我认为这个问题是.on("click", "#container", function(){这可能会应用的代码时#container #box img是点击，我怎么能阻止这个？

演示

http://jsfiddle.net/8FuBD/

Answer 1

您需要使用event.stopPropagation()。事件冒起来，导致div再次淡入。

$(document).on("click", "#box img", function(e){ 
    e.stopPropagation(); 
    // Do things, removed for example 

    $("#box").fadeOut();   
});​ 

http://jsfiddle.net/ycpFL/

Answer 2

更改您的最后部分使用event.stopPropagation从而使该事件不会冒泡到#box元素。

$(document).on("click", "#box img", function(e){ 

    // Do things, removed for example 
    e.stopPropagation(); 
    $("#box").fadeOut();   
});