CSS 親要素へのイベント伝達を阻止

Question

現在、マウスダウン（active）にした時の親へのパブリングを阻止しようと試みております。

以下のコードをご覧ください。

マウスダウン

赤（親）の中に青（子）の四角形があります。赤い要素をアクティブ状態（長押し）にしたら、ピンク色になる状態になっています。
ここで、青い要素をアクティブ状態（長押し）にした時に、赤い要素がピンク色にならないようにするにはどうすればどうすればいいでしょうか？

<div id= "box1">
  <div id= "box2"></div>
</div>

#box1 {
  background: red;
}
#box1:active {
  background: pink;
}
#box2 {
  background: blue;
}

document.getElementById('box2').addEventListener('mousedown', function(e){
    e.stopPropagation();
}, false);

試したこと

• CSSでpointer-eventsをautoやnoneなどに変えてみた。
• JavaScriptでバブリングを阻止しようと試みた。

よろしく願いいたします

夜遅くに申し訳ございません。もしご教示いただけたら幸いです。

追記

できれば、position: relative; のままで、JSを使ってでもうまく挙動を解決したいと思っております。ありがとうございます。

Answer 1

<div id= "box1"></div>
<div id= "box2"></div>

#box1 {
  position:absolute;
  height: 200px;
  width: 200px;
  background: red;
}

#box1:active {
  background: pink;
}

#box2 {
  position:absolute;
  z-index:2;
  height: 100px;
  width: 100px;
  background: blue;
}

こんな感じで上に重ねちゃったらどうでしょう。jsは不要です.

box1,2を親子要素にするのもやめましょう。

Comments

[masa_mf3]

@iwasanaoki さん、回答ありがとうございます。試してみたところ、挙動は変わらずうまくいきませんでした。しかし、考えてくださってとても感謝しております。

[okina]

すいません。訂正しました。こちらで試してみてください。

[masa_mf3]

@iwasanaoki さん、ありがとうございます！確かにこちらなら上手くいきました。引き続きJSでも上手くいかないか考えてみます！

[okina]

追記拝見しました。
activeを使うことにこだわりはありますか？
例えば、onmousedownで色をピンクにして、onmouseupで色を戻す。
子要素がクリックされたときには実行しないということであれば、ご希望に近い形になるかと思います！

[okina]

ちなみに、absoluteは絶対ではありません。relativeでも問題はないです。
重なれば下の要素をクリックできなくなってactiveにならないので、提案しました

[masa_mf3]

ありがとうございます！試してみます！