Odo Pointer

An abstraction for pointer, mouse, and touch events.




Odo Device, Odo Helpers, Tiny Emitter

Odo Pointer also expects Object.assign from ES6 to be available.

X Axis

The pointer class normalizes [single] pointer, mouse, and touch events to a single event with augmented data.

let horizontal = new OdoPointer(document.getElementById('field-x'), {
  axis: OdoPointer.Axis.X,

There are 3 different events which you can listen for, START, MOVE, and END. OdoPointer inherits from TinyEmitter which adds the following methods: on, once,off, and emit.

horizontal.on(OdoPointer.EventType.END, function (evt) {
  console.log(evt); // PointerEvent...

You can also call evt.preventDefault() on the START event to prevent Odo Pointer from adding drag handlers (basically ignoring the event). Calling preventDefault in the END event will tell Odo Pointer to call preventDefault on the native touch/mouse/pointer end event.

Touch the area below

Event data:

Inner element

Y Axis

Using the Y axis will block scrolling on touch devices. Use wisely!

let vertical = new OdoPointer(document.getElementById('field-y'), {
  axis: OdoPointer.Axis.Y,

Touch the area below

Event data:

Both Axis

Using both axis in the pointer will block scrolling on touch devices. Be careful!

The default axis is both.

let both = new OdoPointer(document.getElementById('field-xy'));

Touch the area below

Event data: