touches
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

touches

simplified touch/mouse events for flick and swipe

1.2.2  •  Updated 3 years ago  •  by Jam3  •  MIT License

stable

(click for demo) - (source)

Normalizes touch and mouse events to provide a simpler interface. Simplest case:

//get mouse/touch events on window
require('touches')()
  .on('start', mouseDown)   //-> mousedown / touchstart
  .on('move', mouseMove)    //-> mousemove / touchmove
  .on('end', mouseEnd)      //-> mouseup   / touchend

...

A common pattern for drag events is to listen for events on a parent element (like the window), and use a different element as the target for client offset calculation. The second argument to the event listener is a [x, y] vector representing the calculated client offset (relative to top left of target element).

var touch = require('touches')
touch(window, { target: button })
  .on('move', function (ev, position) {
      console.log('relative pos', position[0], position[1])
  })

Another common pattern, especially with drag events, is filtering touch input to a single finger. Below; the events will only get fired for the first finger placed on the screen. Subsequent fingers will be ignored until after the first finger has been lifted.

touch(window, { target: button, filtered: true })
  .on('start', dragStart)
  .on('move', dragMove)
  .on('end', dragEnd)

Usage

NPM

emitter = require('touches')([element, opt])

Creates a new drag emitter by attaching listeners to element, which defaults to window.

The opt options can be:

  • target the element to use when calculating the position parameter passed to event listeners. The clientX/clientY of the event will be relative to this target
  • filtered whether the touch events should be filtered to the first placed finger
  • type can be a string, either "mouse" or "touch" if listening to only one or the other event is desired. If any other value, will listen for both mouse and touch.
  • preventSimulated (default true) if true, prevents simulated touch events by running ev.preventDefault() on 'touchend' events

If the events are not filtered, the position for an event will be the first changed touch associated with the target.

emitter.disable()

Disables the events associated with this emitter by removing them from the DOM element. Returns the emitter for chaining.

emitter.enable()

Enables the events associated with this emitter by adding them to the DOM element. The emitter is enabled by default. Returns the emitter for chaining.

emitter.target

The current target for position offset calculation.

emitter.on('start', listener)

emitter.on('move', listener)

emitter.on('end', listener)

The mousedown/touchstart, mousemove/touchmove, and mouseup/touchend events, respectively. Listeners are called with two parameters: (ev, position) where ev is the event and position is an [x, y] array of the client offset, relative to the target’s top left.

demo

To run the demo from source, first git clone this repo, then:

cd touches
npm install
npm start

And open localhost:9966 in your browser.

To generate a distribution bundle:

npm run build

License

MIT, see LICENSE.md for details.

Popularity

Weekly Downloads
71
Stars
41

Maintenance

Development

Last ver 3 years ago
Created 5 years ago
Last commit 3 years ago
22 days between commits

Technology

Node version: 6.9.4
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

5 contributors
mattdesl
Maintainer, 30 commits, 4 merges
Works at Artist
Sean Fridman
2 commits, 1 PRs
Hugh Kennedy
2 commits, 2 PRs
Mikko Haapoja
Maintainer, 1 commits, 1 PRs
Works at Shopify
Alejandro Mesa
Maintainer
Works at Jam3
Amelie Rosser
Maintainer
Works at Jam3

Tags

touch
drag
unified
mouse
input
pointer
move
mousemove
touchmove
touchstart
touchend
mouseup
mousedown
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.