は、モーダルオーバーレイのレイアウトを行う、

Question

だから、私が持っている二つの要素、一方が他方の

<div id="outer"> 
    <div id="inner"> 
     <p>Lorem Ipsum</p> 
    </div> 
</div> 

外容器は、内側よりも大きくなっている内にネストをHTML要素の重複を発射イベントの発生を防ぎます。私は両方の原因となるアウターの露出したサーフェスにクリックイベントを登録したいと思いますが、内側のdivをクリックすると発生したくありません。

私はjQuery delegate/stopPropagationを使用しています。これを外側のdivにするために要素を調べようとしていますが、それでもまだ外側のイベントを受け取っています。私は内側のdivの外のヒットエリアで手クロッキングを検討していますが、よりエレガントな選択肢があるかどうかを知りたいと思います。

編集：

いくつかの優れたソリューションがここに投稿されました。

Answer 1

$("#inner").click(function(event){ 
    event.stopPropagation(); 
    // do something 
}); 

がここにフィドルです：

event.currentTarget：このタスクのためにあなたを助ける二つの特性として http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

$('#outer').on('click', function (e) { 
    if (e.target != this) return; 
    // run your code here... 
}); 

ここでフィドルです：http://jsfiddle.net/9sLCx/

Answer 3

イベントオブジェクトイベントがDOMを通過する際に、イベントの現在のターゲットを識別します。イベントが発生した要素を識別するevent.targetではなく、常にイベントハンドラがアタッチされている要素を参照します。 イベント通知は外部divに対して2回、最初にキャプチャフェーズに、後にバブリングフェーズに、内側のdivでハンドラをインスタンス化すると途中で通知されます。必要に応じて伝播を停止することができます。

http://fiddle.jshell.net/hmariod/dvV4E/

document.getElementById("outer").addEventListener('click',etvFn,true); 
document.getElementById("outer").addEventListener('click',etvFn,false); 
document.getElementById("inner").addEventListener('click',etvFn,true); 
document.getElementById("inner").addEventListener('click',etvFn,false); 
document.getElementById("innerP").addEventListener('click',etvFn); 

function etvFn(evt){ 
    var phase; 
    if(evt.eventPhase === 1){ 
     phase = "Capture"; 
    }else if(evt.eventPhase === 2){ 
     phase = "Target"; 
    }else{ 
     phase = "Bubbling"; 
    } 
    alert("Target:" + evt.target.id + "\nCurrent Target:" + evt.currentTarget.id + "\nPhase:" + phase); 
}​