1. ホーム
  2. jquery

[解決済み] [Solved] クリックイベントを子ではなく親のDIVにのみ発生させるには?

2022-04-03 10:27:44

質問

DIVにclassed foobar そして、そのDIVの中にあるいくつかのDIVはクラス化されていませんが、それらは foobar というクラスがあります。

$('.foobar').on('click', function() { /*...do stuff...*/ });

DIVのどこかをクリックしたときだけ発動し、その子DIVには発動しないようにしたいのですが。

どのように解決するのですか?

もし e.target と同じ要素です。 this をクリックした場合、子孫をクリックしたことにはなりません。

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});
.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>