Determine event capture with buttons and container

HTML

<div id="container" style="height: 3em">
<div id="target">Click Me!</div>
</div>

JavaScript

let pointerId = 0;
addEventListener("pointerdown", event => pointerId = event.pointerId, {capture: true});

const target = document.getElementById("target");
const container = target.parentNode;
for (const type of [
  "touchstart",
  "touchend",
  "mousedown",
  "mouseup",
  "pointerdown",
  "pointerup",
  "click",
]) {
  addEventListener(type, event => {
    console.log(
      `${event.type}: { target: "<${event.target.nodeName} id=${event.target.id}>", target.hasPointerCapture(${pointerId})=${target.hasPointerCapture(pointerId)}, container.hasPointerCapture(${pointerId})=${container.hasPointerCapture(pointerId)} }`
    );
  }, {capture: true});
}

target.addEventListener("mousedown", () => target.style.display = "none");