親要素はクリック不可にして、子要素はクリック可能にする方法

結論

以下のようにすればOKです！！

<div class="parent">
  親要素
  <div class="child">
    子要素
  </div>
</div>

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

試しにjsファイルに以下のように記述し、コンソールをチェックしてみました。(jQueryです)

$('.parent').click(function(){
	console.log('親要素をクリックしても反応しない');
});

$('.child').click(function(){
	console.log('子要素をクリックしたときだけ反応');
});

親要素をクリックしたときはコンソールに何も出力されませんが、子要素をクリックしたときだけ以下がコンソールに出力されます。

"子要素をクリックしたときだけ反応"
"親要素をクリックしても反応しない"

「子要素をクリックしたときだけ反応」だけがコンソールに出ると思いましたか？？

実はそうではありません。

これは「伝播（バブリング）」と呼ばれる現象です。

子要素のイベントが親要素にも伝わってどんどん波紋のように広がっていくイメージです。

今回、子要素と親要素にはクリックイベントを登録していますね。
子要素で登録したクリックイベントが、伝播によって親要素のクリックイベントを発動させ、このようなコンソールの出力結果となっています。

★詳しくは「js 伝播」とかでググってください！

もし、親要素にイベントを伝播させたくなければ、以下のようにするといいでしょう。

$('.child').click(function(e){
	e.stopPropagation();
	console.log('子要素をクリックしたときだけ反応');
});

ポイントは「stopPropagation」ですね！

これも本記事のテーマじゃないので説明は割愛させていただきます..詳しはググってください。

親要素はクリック不可にして、子要素だけクリック可能にする方法についてお伝えしました。

まとめると、以下のcssがポイントということになります。

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

そして、もし親要素にも何かjsでイベントを登録していて、子要素のイベントを伝播させたくなければ、stopPropagationを使うと回避できます。

今回は以上になります！