JSFiddle - React, Tailwind, and code Playground

HTML

<div>Mousedown in an element, then, move mouse cursor over the paragraphs in the parent and child documents.
If you mousedown with <kbd>Shift</kbd> key, the default will be prevented.</div>
<p>paragraph in parent<br><span></span><br><span></span><br></p>
<iframe srcdoc="<p>paragraph in child<br><span></span><br><span></span><br></p><input><button>button</button><input type=range><textarea>" width=95% height=250 border></iframe><br>
<input><button>button</button><input type=range><textarea></textarea>

JavaScript

function log(element, event) {
  if (!(event.buttons & 1)) {
    return;
  }
  if ("eventCount" in element) {
   element.eventCount++;
  } else {
   element.eventCount = 0;
  }
  element.textContent =
    `${event.type} ${element.eventCount}: ${event.target.nodeName} (${event.clientX}, ${event.clientY})`;
}

addEventListener("load", () => {
  for (let element of
       [document.querySelector("p"),
        document.querySelector("iframe").contentDocument.querySelector("p")]) {
    element.addEventListener("pointermove", event => {
      if (event.target === element) {
        log(element.querySelector("span"), event);
      }
    }, {capture: true});
  }
  for (let win of [window, document.querySelector("iframe").contentWindow]) {
    win.addEventListener("mouseout", event => {
      if (event.target.nodeName === "P" ||
          event.target.nodeName === "HTML" ||
          event.target.nodeName === "BODY") {
        log(win.document.querySelector("p").querySelector("span + br + span"), event);
      }
    });
  }
  for (let doc of [document, document.querySelector("iframe").contentDocument]) {
    for (let tag of ["button", "input", "textarea"]) {
      for (let element of doc.querySelectorAll(tag)) {
        element.addEventListener("pointerdown", event => {
          if (event.shiftKey) {
            event.preventDefault();
          }
        });
      }
    }
  }
});