simple-input-events
    Overview
    Documentation
    Insights
    Code
    Contributors
    Dependencies
    Alternatives

simple-input-events

Unified mouse & touch events for desktop and mobile

1.0.0  •  Updated 6 months ago  •  by Matt DesLauriers  •  MIT License

Unified mouse & touch event handler for desktop and mobile devices. Filters touch events down to a single finger and offsets the client position so it is relative to the target element.

const createInputEvents = require('simple-input-events');

// create input events with a target element
const event = createInputEvents(canvas);

event.on('down', ({ position, event }) => {
  // mousedown / touchstart
  console.log(position); // [ x, y ]
  console.log(event); // original mouse/touch event 
});

event.on('up', ({ position, event }) => {
  // mouseup / touchend
  console.log(position); // [ x, y ]
  console.log(event); // original mouse/touch event 
});

event.on('move', ({ position, event, inside, dragging }) => {
  // mousemove / touchmove
  console.log(position); // [ x, y ]
  console.log(event); // original mouse/touch event 
  console.log(inside); // true if the mouse/touch is inside the element
  console.log(dragging); // true if the pointer was down/dragging
});

See ./demo.js for an example.

Install

Use npm to install.

npm install simple-input-events --save

Usage

handler = createInputEvents([opt])

Creates input events with the below options opt (also accepts just a DOM element). By default, events are attached to window.

  • target - (default window) the target element to attach events to
  • parent - (default window) the parent element (usually window) to attach movement events, in order to detect drag events outside the target bounds
  • preventDefault - (default false) if true, touch events will prevent default actions, typically useful for locking the page in place during tap events
  • filtered - (default true) if true, finger events will be filtered down to a single finger, instead of allowing multiple fingers

handler.on('down', ({ position, event }))

Handles ‘down’ / pointer start events on the target.

  • position is the [ x, y ] position relative to the top left of the target
  • event is the original mouse or touch event

handler.on('up', ({ position, event, inside }))

Handles ‘up’ / pointer end events on the target.

  • position is the [ x, y ] position relative to the top left of the target
  • event is the original mouse or touch event
  • inside is true if the event occurred with the pointer inside the target bounds

handler.on('move', ({ position, event, inside, dragging }))

Handles ‘move’ / drag events on the target.

  • position is the [ x, y ] position relative to the top left of the target
  • event is the original mouse or touch event
  • inside is true if the event occurred with the pointer inside the target bounds (may be outside in touch drag events)
  • dragging is true if the pointer is considerd ‘down’ or in a drag state

handler.disable()

Detaches events from the target/parent elements.

handler.enable()

Re-attaches events from the target/parent elements if they had been detached.

License

MIT, see LICENSE.md for details.

Popularity

Stars
41

Maintenance

Development

Last ver 6 months ago
Created 6 months ago
Last commit 6 months ago
1 minute between commits

Technology

Node version: 8.10.0
12.9K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

1 contributors
mattdesl
Maintainer, 2 commits
Works at Artist

Tags

touch
events
mobile
tap
click
mouse
move
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.