An abstraction for working with the mouse.
dd({
event, // Pass original event object in
begin: function (ctx) {
console.log('The beginning');
},
end: function (ctx) {
console.log('The end');
},
move: function (ctx) {
console.log(`Position: x=${ctx.x} y={ctx.y}; distance: dx=${ctx.dx} dy=${ctx.dy}`);
},
});
npm i @vbarbarosh/dd
<script src="https://unpkg.com/@vbarbarosh/dd@1.3.0/dist/dd.js"></script>
This abstraction comes from the following observations:
-
Each interaction with the mouse has the following workflow:
mousedown -> mousemove ... mousemove -> mouseup(here is
context.begin,context.end, andcontext.move). -
Almost always what you are really looking for is how far a mouse was moved from the beginning (here is
context.dxandcontext.dy). -
In general, you have to work with 2 coordinate system: the screen coordinates, and local coordinates. And the only thing you are interested in is your local coordinates. Or, in other words, you have to convert coordinates from screen to local (here is
context.translate).
IFRAMEandBUTTON[disabled]stops propagation of mouse events. As a resultddwill not callbeginnotupdatehandlers (Events and disabled form fields).