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

Method	Parameters	Description
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:

Prop	Description
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";

/* Get the element for the mouse. */
var element = document.getElementById("container");

/* Create a mouse instance, with the element as its container.
 * This is to allow the mouse to monitor all mouse events from the container. */
var mouse = new Mouse(element);

/** Append the mouse to the a DOM element and event functions to it. */
mouse.attach(element);

/** Disengage the mouse from DOM element and event functions from it. */
mouse.detach();

/** Toggle value for mouse prevent default on all events. */
mouse.setPreventDefault(preventDefault);

/** Bind an event handler to the mouse enter event. */
let removeEnter = mouse.onEnter(event => { ... });

/** Unbind an event handler to the mouse enter event. */
removeEnter();

/** Unbind all event handlers from the mouse enter event. */
mouse.clearEnter();

/** Bind an event handler to the mouse leave event. */
let removeLeave = mouse.onLeave(event => { ... });

/** Unbind an event handler to the mouse leave event. */
removeLeave();

/** Unbind all event handlers from the mouse leave event. */
mouse.clearLeave();

/** Bind an event handler to the mouse down event. */
let removeDown = mouse.onDown(event => { ... });

/** Unbind an event handler to the mouse down event. */
removeDown();

/** Unbind all event handlers from the mouse down event. */
mouse.clearDown();

/** Bind an event handler to the mouse up event. */
let removeUp = mouse.onUp(event => { ... });

/** Unbind an event handler to the mouse up event. */
removeUp();

/** Unbind all event handlers from the mouse up event. */
mouse.clearUp();

/** Bind an event handler to the mouse move event. */
let removeMove = mouse.onMove(event => { ... });

/** Unbind an event handler to the mouse move event. */
removeMove();

/** Unbind all event handlers from the mouse move event. */
mouse.clearMove();

/** Bind an event handler to the scroll event. */
let removeScroll = mouse.onScroll(event => { ... });

/** Unbind an event handler to the scroll event. */
removeScroll();

/** Unbind all event handlers from the mouse scroll event. */
mouse.clearScroll();

/** Bind an event handler to the drag event. */
let removeDrag = mouse.onDrag(event => { ... });

/** Unbind an event handler to the drag event. */
removeDrag();

/** Unbind all event handlers from the mouse drag event. */
mouse.clearDrag();

/** Bind an event handler to the drag over event. */
let removeDragOver = mouse.onDragOver(event => { ... });

/** Unbind an event handler to the drag over event. */
removeDragOver();

/** Unbind all event handlers from the drag over event. */
mouse.clearDragOver();

/** Bind an event handler to the drop event. */
let removeDrop = mouse.onDrop(event => { ... });

/** Unbind an event handler to the drop event. */
removeDrop();

/** Unbind all event handlers from the drop event. */
mouse.clearDrop();

/** Bind all event handlers from the stop event. */
let removeStop = mouse.onStop(event => { ... });

/** Unbind an event handler to the stop event. */
removeStop();

/** Unbind all event handlers from the stop event. */
mouse.clearStop();

/** Bind all event handlers from the click event. */
let removeClick = mouse.onClick(event => { ... });

/** Unbind an event handler to the click event. */
removeClick();

/** Unbind all event handlers from the click event. */
mouse.clearClick();