Javascript
I’m in the process of figuring out pointer events after originally doing the games for mouse events.
Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree). — Best Practices
This means add listeners to canvas rather than document?
Hit Test
Pointer Capture
function downHandler(ev) {
const el = document.getElementById("target");
// Element "target" will receive/capture further events
el.setPointerCapture(ev.pointerId);
}
function cancelHandler(ev) {
const el = document.getElementById("target");
// Release the pointer capture
el.releasePointerCapture(ev.pointerId);
}
function init() {
const el = document.getElementById("target");
// Register pointerdown and pointercancel handlers
el.onpointerdown = downHandler;
el.onpointercancel = cancelHandler;
}
https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture
https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture
https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems
e.clientX