<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Test Page</title>
<style>
body {
width: 300vw;
height: 300vh;
}
#range {
width: 400px;
}
#offscreenRange {
position: absolute;
left: 8px;
top: 200vh;
}
#dragLogger {
width: 300px;
height: 300px;
background-color: thistle;
position: absolute;
left: 500px;
top: 300px;
}
#pointerLogger {
width: 30px;
height: 30px;
background-color: burlywood;
}
</style>
</head>
<body>
<input id="range" type="range" min="0" max="100" value="0">
<div id="dragLogger"></div>
<input id="offscreenRange" type="range" min="0" max="100" value="0">
<div id="pointerLogger"></div>
<script>
let event_log = [];
let log_handler =
e => event_log.push(`${e.type}[${e.clientX},${e.clientY}]`);
const el = document.getElementById('dragLogger');
el.addEventListener('mousedown', log_handler);
el.addEventListener('mousemove', log_handler);
el.addEventListener('mouseup', log_handler);
let pointer_log = [];
let pointer_handler = e => pointer_log.push(`${e.type}[${e.clientX},${e.clientY}]: ${e.buttons}`);
const pl = document.getElementById('pointerLogger');
pl.addEventListener('pointerdown', pointer_handler);
pl.addEventListener('pointermove', pointer_handler);
pl.addEventListener('pointerup', pointer_handler);
pl.addEventListener('gotpointercapture', pointer_handler);
pl.addEventListener('pointerdown', e=> pl.setPointerCapture(e.pointerId));
</script>
</body>
</html>
