Discussion on: Front-end Challenge: Prevent Clicks

[Developer Ruhul]

This works ->

function addBlocker() {
  let html = document.querySelector("html")
  html.style.pointerEvents = "none"

  const handleClick = e => {
    html.style.pointerEvents = "auto"
    console.log({
      target: document.elementFromPoint(e.clientX, e.clientY),
      x: e.clientX,
      y: e.clientY,
    })
    html.style.pointerEvents = "none"
  }

  html.addEventListener("click", handleClick)

  return () => {
    html.style.pointerEvents = "auto"
    html.removeEventListener("click", handleClick)
  }
}

// also removes the click event listener
var removeBlocker = addBlocker();