pointermove outside window

Browsers fire the 'pointermove' event when "selecting" (pointerdown) outside window.

by David Iglesias

HTML

<div id="glass">
  <div class="draggable">
    "Drag" me
  </div>
</div>

CSS

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }

#glass {
  width: 100%;
  height: 100%;
  background: #fbd;
}

.draggable {
  width: 100px;
  height: 100px;
  background: #f90;
}

JavaScript

// When you "Drag" (select text) in the
// orange box, the browser will report
// pointer position outside the window.
window.addEventListener('pointermove', (event) => {
  console.log(
    Math.round(event.offsetX), 
    Math.round(event.offsetY)
  );
});

/*/
// This one does NOT report pointer
// position outside of it.
glass.addEventListener('pointermove', (event) => {
  console.log(
    Math.round(event.offsetX), 
    Math.round(event.offsetY)
  );
});
/**/

/*/
// Unless we setPointerCapture it!
glass.addEventListener('pointerdown', (e) => {
  console.log('Grabbing event...');
  glass.setPointerCapture(e.pointerId);
});
/**/