連続したクリックイベントの問題

Question

Javascriptの特別なイベントのシナリオを理解できません。黄色のボックスが最初にクリックされたとき

説明のためhttp://jsfiddle.net/UFL7X/

を参照してください、私は最初のクリックイベントハンドラが呼び出されることを期待すると大きなボックスが緑色になります。しかし、2番目のハンドラは、クリックが発生した時点では存在しませんでしたが（少なくとも私が思ったもの）、両方のイベントハンドラが呼び出されます（大きなボックスは赤色になります）。

どのように説明できますか？

Answer 1

http://jsfiddle.net/mitchmalone/UFL7X/1/だから何が起こっているのか、あなたのイベントは、DOMを湧き上がっているということです。

1. クリックして、クリック機能が呼び出される
2. div2div2に発生し、それが（暗黙のreturn trueで）それはdiv1
3. div2クリック機能の端にクリックイベントを割り当てdiv1
4. の色を変更し
6. DOM内の親までのイベントバブル
ことに注意してください方法：あなたはこれが起こるしたいいけない場合
7. div1クリック機能が

と呼ばれている、あなたはdiv2

EDITのためにあなたのクリックハンドラでreturn falseに必要なイベントをクリックして泡立て

div1受け取りますあなたはdiv2を100回クリックすると、div1に100回のクリックイベントが実行されるので、あなたのJSを整理するのが最善ではないかもしれません。

私は（私はあなたの要件が何であるかを知らない心に留めておく）あなたはこのようにそれを行うことを示唆している：

$("#div2").click(function() { 
    $("#div1").css("background-color", "green"); 
    return false; 
}); 

$("#div1").click(function() { 
    $("#div1").css("background-color", "red"); 
}); 

Answer 2

これは、＃div2をクリックすると＃div1のクリックもトラッキングされるためです。これは、＃div2クリックの色を変更した後にfalseを返すことで修正できます。作業バージョンのため、このjsFiddleを参照してください。

$("#div1").live("click", function() { 
    $("#div1").css("background-color", "red"); 
}); 

$("#div2").live("click", function() { 
    $("#div1").css("background-color", "green"); 
    return false; 
});