javascript - クリックハンドラーを特定のHTMLタグの要素を除くすべての要素にバインドします

Question

だから私はあなたがクリックするとテキストボックスを使うことができるページ設定を持っています：

クリックすると要素に「アクティブ」クラスが追加され、別のテキストボックスをクリックすると削除されます。赤い背景をクリックしたら、クラスを削除したいと思います。また、すぐにページに要素を追加したいので、この削除は<body>要素である赤い部分をクリックすることによってのみ行われることが重要です。

これが私が今ページに持っているものです:(ログはクラスの削除によって置き換えられることに注意してください）

$('*:not(li)').click(function(){
    console.log('foo')
});

li問題は、要素であるテキストボックスに直接でも、クリックしたすべての場所に「foo」が記録されることです。背景をクリックするだけでこれを機能させるにはどうすればよいですか？

ありがとう！

score 2 · Accepted Answer

問題は、HTMLスタックをバブリングしていることです。すべてにハンドラーを配置することにより、LIをクリックしても、イベントはそのULにバブルアップします。同様に、$（'body'）はバブリングの問題を引き起こします。

これを処理するには、メインスタックの外部にdivを作成するのが最善です。ページの大部分の後ろに絶対に配置されたdivを想像してみてください。

LI以外のすべてを本当に起動させたい場合は、コードを次のようにする必要があります。

$('*:not(li)').click(function(){
// do something.
});
$('li').click(function(evt){
// do something else.
    evt.stopPropagation();
});

1 に答える 1