click through test

by Jared Meadows

HTML

<div class="block">
  <div id="foreground">selectable content</div>
  <div id="clickableBackground">background content div</div>
</div>

CSS

.block{
  position: relative;
  background: #00FFFF44;
  isolation: isolate;
}

#foreground {
  background: transparent;
  pointer-events: all;
  cursor: text;
  margin-left: 1rem;
  color: yellow;
  z-index: 10;
  width: max-content;
}

#clickableBackground {
  background: blue;
  pointer-events: auto;
  color: red;
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: -1;
}

JavaScript

function handleMouseMove() {
	console.log("bg handleMouseMove")
}

document.querySelector("#clickableBackground").addEventListener("mousemove", handleMouseMove);
document.querySelector("#foreground").addEventListener("click", handleMouseClick);
document.querySelector("#foreground").addEventListener("mousemove", handleForegroundMove);

function handleMouseClick() {
	console.log("click foreground")
}

function handleForegroundMove(event) {
	console.log("foreground move");
  event.preventDefault();
}