jw-mouse
A static and stateful instance which hooks into all mouse and touch events.
It also captures position, direction and speed of movement.
(Currently it supports single touch only)

Demo
Install

Methods
attach | element : DOM element | append the mouse to the a DOM element and event functions to it. |
detach | | disengage the mouse from DOM element and event functions from it. |
setPreventDefault | preventDefault : boolean | toggle value for mouse prevent default on all events. |
onEnter | handler : function | bind an event handler to the mouse enter event. Returns a method to unbind. |
clearEnter | | unbind all event handlers from the mouse enter event. |
onLeave | handler : function | bind an event handler to the mouse leave event. Returns a method to unbind. |
clearLeave | | unbind all event handlers from the mouse leave event. |
onDown | handler : function | bind an event handler to the mouse down event. Returns a method to unbind. |
clearDown | | unbind all event handlers from the mouse down event. |
onUp | handler : function | bind an event handler to the mouse up event. Returns a method to unbind. |
clearUp | | unbind all event handlers from the mouse up event. |
onMove | handler : function | bind an event handler to the mouse move event. Returns a method to unbind. |
clearMove | | unbind all event handlers from the mouse move event. |
onScroll | handler : function | bind an event handler to the mouse scroll event. Returns a method to unbind. |
clearScroll | | unbind all event handlers from the mouse scroll event. |
onDrag | handler : function | bind an event handler to the mouse drag event. Returns a method to unbind. |
clearDrag | | unbind all event handlers from the mouse drag event. |
onDragOver | handler : function | bind an event handler to the mouse drag over event. Returns a method to unbind. |
clearDragOver | | unbind all event handlers from the mouse drag over event. |
onDrop | handler : function | bind an event handler to the mouse drop event. Returns a method to unbind. |
clearDrop | | unbind all event handlers from the mouse drop event. |
onStop | handler : function | bind an event handler to the mouse stop event. Returns a method to unbind. |
clearStop | | unbind all event handlers from the mouse stop event. |
onClick | handler : function | bind an event handler to the mouse click event. Returns a method to unbind. |
clearClick | | unbind all event handlers from the mouse click event. |
Handler Event
On handling the event, the same event object as the one from addEventListener
will be passed as a parameter, with an additional mouse
object, which holds the following properties:
isMouseDown | whether any mouse key is pressed down. |
scrollDelta | the delta value when the mouse scrolls. |
isTouching | whether the mouse is currently contacted by touch surface. |
previousPosition | previous mouse position. |
previousDownPosition | previous mouse position when a mouse button was pressed. |
position | current mouse position. |
direction | current mouse direction. |
movedDistance | the distance moved from previous position. |
movingSpeed | current mouse moving speed. |
preventDefault | whether the mouse skips the default behaviours upon the listen element. |
Usage
import Mouse from "jw-mouse";
var element = document.getElementById("container");
var mouse = new Mouse(element);
mouse.attach(element);
mouse.detach();
mouse.setPreventDefault(preventDefault);
let removeEnter = mouse.onEnter(event => { ... });
removeEnter();
mouse.clearEnter();
let removeLeave = mouse.onLeave(event => { ... });
removeLeave();
mouse.clearLeave();
let removeDown = mouse.onDown(event => { ... });
removeDown();
mouse.clearDown();
let removeUp = mouse.onUp(event => { ... });
removeUp();
mouse.clearUp();
let removeMove = mouse.onMove(event => { ... });
removeMove();
mouse.clearMove();
let removeScroll = mouse.onScroll(event => { ... });
removeScroll();
mouse.clearScroll();
let removeDrag = mouse.onDrag(event => { ... });
removeDrag();
mouse.clearDrag();
let removeDragOver = mouse.onDragOver(event => { ... });
removeDragOver();
mouse.clearDragOver();
let removeDrop = mouse.onDrop(event => { ... });
removeDrop();
mouse.clearDrop();
let removeStop = mouse.onStop(event => { ... });
removeStop();
mouse.clearStop();
let removeClick = mouse.onClick(event => { ... });
removeClick();
mouse.clearClick();