jquery - クリックでは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 fadeIn();
2. のアイテムを#boxクリックします
3. #box fadeOut()

これを行うために、私は次の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();        
});