pointerdown/move/up test

README.md

pointerdown/move/up test

view on jsgist

index.css

:root {
  color-scheme: light dark;
}
html {
  overscroll-behavior: none;
  touch-action: none;
}

index.html

<p>drag mouse/finger</p>
<pre id="log"></pre>

index.js

const lines = [];

const logElem = document.querySelector('#log');

function log(msg) {
  lines.push(msg);
  lines.splice(0, lines.length - 20);
  logElem.textContent = lines.join('\n');
}

function onMove(e) {
  e.preventDefault();
  log('pointermove');
  log(`${e.clientX}, ${e.clientY}`);
}

function onUp(e) {
  e.preventDefault();
  log('pointerup');
  window.removeEventListener('pointerup', onUp);
  window.removeEventListener('pointermove', onMove);
}

function onDown(e) {
  log('pointerdown');
  onMove(e);
  window.addEventListener('pointerup', onUp, { passive: false });
  window.addEventListener('pointermove', onMove, { passive: false });
}

function preventScroll(e) {
  e.preventDefault();  
}
//window.addEventListener('touchmove', preventScroll, { passive: false });

window.addEventListener('pointerdown', onDown, { passive: false });
log('start');

jsGist.json

{"name":"pointerdown/move/up test","settings":{},"filenames":["index.html","index.css","index.js"]}