1

より具体的なイベントが定義されている場合、以前に定義されたイベントが発生しないようにするにはどうすればよいですか?

ここに編集されたフィドルがあります

    <div class="first">
    <div class="wrapper">
        <span class="click">click</span>
        <div class="second">
            <div class="wrapper"> 
                <span class="click">click</span>
            </div>
        </div>
    </div>
</div>

  $('.first .click').on('click', function(e) {
    e.stopPropagation();
    alert('first');
});

$('.second > .click').on('click', function(e) {
    e.stopPropagation();
    alert('second');
});

最初の div にネストされた 2 番目の span.click を使用して、最初の div に関連付けられたイベントを発生させないようにします。

編集:(反対票に乾杯)

以下のいくつかの回答は、直接の親>子セレクターを使用して上記のマークアップに完全に機能します。残念ながら、この例のマークアップは簡略化されているため、誤解を招く可能性があります。

私の製品コードでは、クリック/ボタンは両方の部分で使用される共有テンプレートの一部であるため、この例の .second の「親」セレクターは、ボタンから DOM のいくつかのノードにあります。

より関連性の高いフィドルを追加しようとします。

4

2 に答える 2

3

子セレクター を使用して、この方法で試してください>

$('.first > .click').on('click', function(e) {
    e.stopPropagation();
    alert('first');
});

$('.second > .click').on('click', function(e) {
    e.stopPropagation();
    alert('second');
});
于 2013-06-27T08:19:57.513 に答える
3

Child Selector を使用するjQuery( "parent > child" )ため、コードは次のようになります

$('.first > .click').on('click', function(e) {
    e.stopPropagation();
    alert('first');
});

$('.second .click').on('click', function(e) {
    e.stopPropagation();
    alert('second');
});

ここにフィドルがあります

アップデート

マークアップを更新したので、更新されたフィドルがあります

于 2013-06-27T08:23:06.387 に答える