Mouse Handlers

The basics of all event handlers is described in another post. This post describes MouseHandler.

All of the base EventHandler functionality is available as with all CategoryEventHandlers. The most useful being

MouseHandler manages callbacks for mouse events

ClickHandler can also be used for ‘click’. The difference is that MouseHandler processes the mouse position while ClickHandler should just be used to the click. [touch events are not done yet. ClickHandler will be better for handling mouse or touch].

MouseHandler does 2 things in addition to managing application callbacks.

MousePosition

A MousePosition object is passed as the first argument to some callbacks. (Unless the EventHandler has a setData() function and MousePosition is the 2nd argument). A position object looks like

{
"x": 35,
"y": 54,
"pctX": 0.7,
"pctY": 0.72,
"width": 50,
"height": 75
}

x,y – x & y position of the mouse within the selected element

width, height – width and height of the selected element

pctX, pctY – x & y percentage of the element’s width and height.

If a single element is listened to, these values can be read or calculated from the Event. But, if addEventListener() is listening to a parent object, with a selector for one or more children, the values can be more effort to get. For example               

BuildMouseListener()

.listen(‘#watch’,’.watched-element’).onMouseMove(handleMove)

    .build(),

In this case, the event position values are for ‘#watch’. This can be found in the event parameter passed to the callback. handleMove may want the position relative to the ‘.watched-element’ the mouse is over, and that is in the MousePosition parameter.

MouseMove

The most basic mouse event is ‘mousemove’

BuildMouseListener().listen(‘.mouse-watch’)
.onMouseMove(handleMouseMove)
.build()

function handleMouseMove(mousePosition, target, event,handler) {…}

This is a good candidate for debouncing to prevent handling mousemove events until the user stops moving the mouse.

BuildMouseListener().listen(‘.mouse-watch’)

.debounce()
.onMouseMove(handleMouseMove)
.build()

MouseUp & MouseDown

These event callbacks have a mousePosition argument, like mousemove. It’s possible, even likely, you want to handle multiple events with a single listener

BuildMouseListener().listen(‘.mouse-watch’)
.onMouseMove(handleMouseMove)
.onMouseDown(handleMouseDown)
.onMouseUpd(handleMouseUp)
.build()

function handleMouseMove(mousePosition, target, event,handler) {…}

function handleMouseMove(mousePosition, target, event,handler) {…}

function handleMouseMove(mousePosition, target, event,handler) {…}

MouseUp and MouseDown callbacks are called for all mouse buttons.

OnLeftDown, OnLeftUp, OnRightDown, OnRightUp, OnMiddleDown, OnMiddleUp

These callbacks work like MouseUp and MouseDown, but work for specific buttons

BuildMouseListener().listen(‘.mouse-watch’)
.onLeftUp(selectItem)
.onMiddleUp(selectToggleItem)
.onRightUpd(selectToItem)
.build()

If middle presses are handled, the browser’s default contextmenu handler is disabled for this element.

OnMouseOver, OnMouseOut, OnMouseEnter, OnMouseLeave

These callbacks are used for the 4 event types.

BuildMouseListener().listen(‘.mouse-watch’)
.onMouseOver(mouseOver)
.onMouseOut(mouseOut)
.onMouseEnter(mouseEnter)
.onMouseLeave(mouseLeave)
.build()

These callbacks do not have a MousePosition parameter. If position is needed, it can be calculated from the event parameter.

MouseWheel

This callback is called when the user moves the mousewheel. The first parameter is the distance the mousewheel moved

{

deltaX: …,

deltaY: …

}

BuildMouseListener().listen(‘.mouse-watch’)
.onMouseOver(mouseWheel)
.build()

function mouseWheel(distance, target, event, handler) {…}

Distance granularity may vary by system and browser settings. deltaX and deltaY are the distances the mouse moved on the X and Y axis. Negative values mean toward top or left and positive values are toward right or bottom.

Tagged