Create responsive buttons with CSS, track mousedown events in JavaScript, and trigger different console logs based on button ID.

by core972

HTML

<div id="btn-001" class="buttton" style ="background-color: #ff0000">aaaaaa
  <div id="btn-002" class="buttton" style ="background-color: #00ff4c">bbbbbbb
    <div id="btn-003" class="buttton" style ="background-color: #1e68d8">ccccccc
      <button type="button">ddd</button>
    </div>
  </div>
</div>

CSS

.buttton {
  position: absolute;
  width: 5rem;
  height: 2rem;
  padding: 1rem;
  top: 0;
  opacity: 0.5;
}
#btn-002{
  top: 2rem;
}
#btn-003{
  top: 1rem;
  left: 2rem;
  pointer-events: none;
}

JavaScript

const buttons = document.getElementsByClassName("buttton");

const btn3 = document.getElementById("btn-003");
btn3.addEventListener("mouseup")
for (const el of buttons) {
  el.addEventListener("mousedown", ev => {
    console.log("down", ev.target.id);
  }, false);
  if(el.id === "btn-002") {
    el.addEventListener("mouseup", ev => {
      console.log("up",ev.target.id);
    }, false);
  }
}