はどのように似た構造を持っている私は、要素とその親

Question

言って別のイベントハンドラを割り当てるのですか？ハンドラを<ul>に割り当てると、<li>のいずれかをクリックするとトリガされます。

Answer 1

代わりに、あなたのリスト内の各要素のための単一のハンドラを設定するのは、親に単一のイベントリスナーを使用して、イベントの委任を使用して、ユーザーはあなたが使用することができます

$('ul').on('click', function(evt) { 
    id = evt.target.id; 
    switch (id) { 
     "a" : ... break; 
     "b" : ... break; 
     "c" : ... break; 
     default: ... ; 
    } 

}); 

Answer 2

イベントが発生するたびに、イベントは「バブル」します。これは、それが関連付けられている実際の要素で呼び出されることを意味しますが、チェーン内のすべての親要素について、一番上まで一度も起動されます。あなたのケースでは、bまたはcをクリックするたびに、イベントはaのためにになるでしょう。これを避けるには、バブリングを止める必要があります。

具体的には、a、b及びcのためのあなたのイベントハンドラでは、あなたがこれを行うことにより、イベントバブルを停止する必要があります：

if (event.stopPropagation) event.stopPropagation(); 
else event.cancelBubble = true; 

ほとんどのブラウザでは、バブリングを終了するイベントにstopPropagationをサポートしています。 IEの古いバージョンはcancelBubbleプロパティを使用します。したがって、上記はブラウザ間で互換性があります。

は、私はあなたがjQueryのを指定していない知っているが、それはとても人気なので、それはあなたがjQueryのを使用している場合、この条件は、フレームワークの背後に隠されていることは注目に値しますので、あなたがちょうどすることができます

event.stopPropagation() 

Answer 3

をクリックした要素のidであるかを検出する方が良いでしょうこの。

$('ul li#a').click(function(){ 
//some thing here... 
}); 
$('ul li#b').click(function(){ 
//some thing here... 
}); 

Answer 4

すべてのイベントはDOMツリーを泡立たせます（または少なくともIEのように "should"）。その泡立ちを止めたいかもしれません、Ben Lee's answerを参照してください。しかし、より良い方法があります：

あなたが視聴している要素に対してリスナーを引き起こしているイベントが発生したかどうかを確認してください。その後、ハンドラを実行するかエスケープします。

document.getElementById("a").addEventListener("click", function(e) { 
    var a = e.currentTarget; // reference to #a 
    var t = e.target; // this may be #b or #c or any of their children - or not 
    if (a != t) 
     return; 
    // else 
    // do what you wanted to do 
}, false); 

Answer 5

私のプロジェクトでも同じ問題が発生しました。私がしたのは、最初にグローバル変数として宣言されました（フラグの目的とデフォルト値false）。次に、すべての子に対してonmouseoverイベントとonmouseoutイベントをトリガし、カーソルが子の上にあるときはいつでもフラグの値をtrueに変更しました（子を離れるたびにfalseに戻す）。したがって、親のonclick関数を宣言する際には、フラグの値をチェックする条件を設定するだけです。