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