jquery - 特定の子がクリックされた場合にクリック機能を防ぐ方法は?

Question

フィドル

何らかの理由でnot()、on()関数内が機能していません。アクア (親) 要素がクリックされた場合にのみ関数を実行し、グレー(子) 要素がクリックされたsection場合は何もしません。div

jQuery:

$('body').append('<section><div class="someClass"></div><section>');

$('body').on('click', 'section:not(".someClass")', function(){
    alert('Aqua not gray clicked.');
});

sectionまた、アクア要素をクリックするとアラートが 2 回ポップアップするのはなぜですか?

Answer 1

section と for 子孫セレクターの間にスペースがあり:not、意図した要素が section の子孫であるため、おそらく必要ありません。スペースがあると、 class を持たないセクションに見えますsomeclass。

$('body').on('click', 'section :not(:has(.someClass))', function(){
    alert('Aqua not gray clicked.');
});

イベントをセクションにバインドし、クラスsomeclassの子孫を持つセクションのハンドラーでコードの実行をバイパスできます。

$('body').on('click', 'section', function(){
    if($(this).find('.someClass').length > 0) return;
    alert('Aqua not gray clicked.');
});

Answer 2

e.targetクリックされた実際の要素 ( ) にそのクラスがあるかどうかを確認する必要があります。

if ($(e.target).hasClass('someClass')) return;