javascript - divの残りを選択する方法は?

Question

問題が発生しました

<div id='parent'>
  <div id='child'>
  </div>
</div>

私が欲しいのは、子がaddClassをクリックされたとき、そして親の残りがremoveClassをクリックされたときです。

$('#child').click(function(){
  $(this).addClass();
})
$('#parent').click(function(){
  $('#child').removeClass();
})

動作していないのは、子が実際に親の内部にあるためだと思います。そのため、子をクリックすると、親が右クリックされましたか?

どうすればそれを行うことができますか？

score 5 · Accepted Answer

これを試して：

$('#child').click(function(evt){
  evt.stopPropagation();
  $(this).addClass("myClass");
});

score 2 · Accepted Answer

event.stopPropagationを使用して、イベントが DOM ツリーにバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにすることができます。

$('#child').click(function(e){
  e.stopPropagation();
  $(this).addClass();
});

score 0 · Accepted Answer

何人かのユーザーがすでに良い解決策を提案しています - これが機能する理由の説明です:

HTML 要素 (実際には DOM オブジェクト...) をクリックすると、クリックイベントがルート要素まで「バブル」します。たとえば、予想どおり、クリックインはクリックイン#childもトリガーします#parent。

この動作を停止する.stopPropagation()には、クリックイベントを呼び出す必要があります。これにより、イベントを伝播させたくないが、「ローカル」のままにしておくことがブラウザーに通知されます。基本的に、ここでそれを処理したら、それはもう終わりであり、二度と見たくありません。

便利なことに、jQuery イベントハンドラーはイベントを最初の引数として受け取るため、署名付きの関数を割り当てると、他の人が提案したようにfunction (e) { ... }イベントの伝播を停止できます。e.stopPropagation();あなたの場合、あなたが望む

$('#child').click(function(e){
  $(this).addClass();
  e.stopPropagation();
});
$('#parent').click(function(){
  $('#child').removeClass();
});

3 に答える 3