重ね順を変える、もしくは同じ大きさのboxを上に重ねたい

Question

前提・実現したいこと

◎重ね順を変える、もしくは同じ大きさのboxを上に重ねたい

以下のようなコードがあった場合に、pタグが重ね順の上になるため、pタグの部分をクリックした際に、pタグがクリックされたと判定されてしまいます。このクリック時にbox1がクリックされたと判定させることはできないのでしょうか？

もしくは、box1を完全に覆う形でbox2が作れればいいのですが...

どちらの方法でも構いませんので、ご存知の方がいらっしゃいましたら、ご教授をお願いいたします。

該当のソースコード

<div id="box1">
   <p>ああああああ</p>
</div>

Comments

[m.ts10806]

divには反応させたいがpには反応させたくないということでしょうか。
実際に試したコードを提示してください。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('#box1,#box1 *').forEach(x=>{
    x.addEventListener('click',(e)=>{
      e.stopPropagation();
      console.log(x.nodeName);
    },true);
  });
});
</script>
<div id="box1">いいい
   <p>ああああああ</p>
ううう</div>

Answer 2

こんにちは。

box1がクリックされたと判定させる

これは、JavaScriptのイベントの話、と理解していいですか？
色々な方法があると思いますが、CSS の pointer-events を使うのはいかがですか？

サンプル

参考：
pointer-events - CSS: カスケーディングスタイルシート | MDN

---

というか、普通にバブリングを拾えばいいような気もします。
イベントのバブリングとキャプチャリング | イベントの紹介 - ウェブ開発を学ぶ | MDN