1

ライブコールがドキュメントを介してバブルアップすることを認識しているため、問題が発生しています。

残念ながら、イベントハンドラーを要素にバインドするサードパーティのライブラリを使用しており、クリックイベントがそれらの要素にバブルされないケースを作成したいと思います。

.click（）をeventStopPropagation（）と組み合わせて使用​​することは問題なく機能しますが、コンテンツの動的な性質のため、live、on、delegateなどのいずれかを使用する必要があります...これが私の問題のいじくりです。「内側」のdivをクリックしたときに「中央」のクリックが発生しないようにする必要があります。「中間」ハンドラーを変更することはできません（アクセスさえできないと考える場合に最適です）。

よろしくお願いします!! 繰り返して申し訳ありませんが、この方法の方がきれいだと思いました。

http://jsfiddle.net/99zQM/9/

HTML：

<div id="outer">
    outer non dynamic element
    <div id="middle">
        middle dynamic
        <div id="inner">
            inner dynamic
        </div>
    </div>
</div>

Javascript：

$("#middle").bind('click',function(e){
    //is rebound when content is loaded
   alert("middle clicked"); 
});
$('#inner').live('click',function(e){
    alert("inner clicked"); 
});
4

3 に答える 3

1

.onクリックイベントのバインドに使用します。＃outer、＃middle、＃innerへのバインディングごとに。バブルアップイベントを防ぐには、stopPropagationを使用します。

$("#outer").on('click', function(e){
    e.stopPropagation();
    alert("outer clicked"); 
});

$("#outer").on('click', '#middle', function(e){
    e.stopPropagation();
    alert("middle clicked"); 
});

$("#outer #middle").on('click', '#inner', function(e){
    e.stopPropagation();
    alert("inner clicked"); 
});

jsFiddleの例：http ：//jsfiddle.net/99zQM/11/

于 2013-03-05T10:08:07.140 に答える
1

このコードを使用する

$(document).bind('click',function(e) {
    if (e.target)
        target = e.target;
    else if (e.srcElement)
        target = e.srcElement;
    else
        target = e.currentTarget;

    if (target.id == 'middle') 
    {
    alert("middle clicked"); 
    }

       else if (target.id == 'inner')
       {
       alert("inner clicked"); 
       }
});

http://jsfiddle.net/99zQM/12/

于 2013-03-05T10:13:01.063 に答える
0

クリックハンドラーをキャプチャして、次のようなイベントバブリングをテストする別のハンドラーで動的にラップすることができます。

// Your code does not change

    $("#middle").bind('click',function(e){
        //is rebound when content is loaded
       alert("middle clicked"); 
    });

    $('#inner').live('click',function(e){
        alert("inner clicked"); 
    });

// capture the click handler on #middle and wrap it inside a test for bubbling
var handler = $._data($("#middle")[0], "events")["click"][0].handler;
$('#middle').unbind('click');

$("#middle").bind('click',(function(handlerVar){return function(e){
    if(e.target===this) // test for bubbling
    {
        handlerVar(e);
    }
}})(handler));

参照： http： //jsfiddle.net/99zQM/13/

これがお役に立てば幸いです

于 2013-03-05T10:54:28.787 に答える