13

つまり、2つの要素があり、一方は他方の中にネストされています

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

外側のコンテナは内側のコンテナよりも大きく、モーダルオーバーレイレイアウトに影響します。両方が閉じられる原因となる外側の露出面でクリックイベントを登録したいのですが、内側のdivをクリックした場合にこれが発生することは望ましくありません。

私はjQueryデリゲート/stopPropagationを使用しており、要素を問い合わせてそれが外部divであることを確認しようとしていますが、無駄です-それでも外部イベントを受け取ります。内側のdivの外側のヒットエリアでハンドクランキングを検討していますが、もっとエレガントな代替手段があるかどうか知りたいです。

編集：

ここに投稿されたいくつかの良い解決策-フィードバックに感謝します！

4

3 に答える 3

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

ここにフィドルがあります：http： //jsfiddle.net/sajjansarkar/fA2sd/1/

于 2013-01-04T17:54:57.020 に答える
8 
$('#outer').on('click', function (e) {
    if ( e.target != this) return;
    // run your code here...
});

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

于 2013-01-04T17:54:22.173 に答える
2

このタスクに役立つ2つのプロパティとしてのイベントオブジェクト：

event.currentTargetは、イベントが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);
}​
于 2013-01-04T18:04:26.807 に答える