pointer-event

PointerEvent

Event Controller for mouse and touch interfaces

Usage

var pointerEvent = new PointerEvent(),

  // startHandlerId which is used for adding/removing to element is returned.
  startHandlerId = pointerEvent.regStartHandler(function(pointerXY) {
    console.log('[START]');
    console.dir(pointerXY); // Object having `clientX` and `clientY`.
    this.options.stopPropagation = false; // Access to current instance via `this`.
    return true; // If it returns `false`, the starting is canceled.
  });

// When `mousedown` or `touchstart` is fired on this element, the registered start-handler is called.
pointerEvent.addStartHandler(document.getElementById('trigger'), startHandlerId);

// When `mousemove` or `touchmove` is fired on this element, this move-handler is called.
// By default, the handler is called via `requestAnimationFrame`. `true` for third argument disables this.
pointerEvent.addMoveHandler(document, function(pointerXY) {
  console.log('[MOVE]');
  console.dir(pointerXY); // Object having `clientX` and `clientY`.
  this.options.stopPropagation = false; // Access to current instance via `this`.
}/*, true */);

// When `mouseup` or `touchend` is fired on this element, this end-handler is called.
pointerEvent.addEndHandler(document, function(pointerXY) {
  console.log('[END]');
  console.dir(pointerXY); // Object having `clientX` and `clientY`.
  this.options.stopPropagation = false; // Access to current instance via `this`.
});

// When `touchcancel` is fired on this element, this cancel-handler is called.
pointerEvent.addCancelHandler(document, function() {
  console.log('[CANCEL]');
  console.log(this.options.stopPropagation); // Access to current instance via `this`.
});

// ============================================================================

document.getElementById('move-button').addEventListener('click', function() {
  // Emulate the `move` that is done when `mousemove` or `touchmove` is fired.
  pointerEvent.move(); // pointerXY can be passed.
}, false);

document.getElementById('end-button').addEventListener('click', function() {
  // Emulate the `end` that is done when `mouseup` or `touchend` is fired.
  pointerEvent.end(); // pointerXY can be passed.
}, false);

document.getElementById('cancel-button').addEventListener('click', function() {
  // Emulate the `cancel` that is done when `touchcancel` is fired.
  pointerEvent.cancel();
}, false);

// ============================================================================

// Remove the added start-handler from this element.
pointerEvent.removeStartHandler(document.getElementById('trigger'), startHandlerId);

// Unregister the registered start-handler.
pointerEvent.unregStartHandler(startHandlerId);

// ============================================================================

// Options:
// preventDefault {boolean} [true] - Call `event.preventDefault()` if it is `true`.
// stopPropagation {boolean} [true] - Call `event.stopPropagation()` if it is `true`.
var pointerEvent = new PointerEvent({stopPropagation: false}); // Don't call that.

// ============================================================================

// addEventListener with specific option.
PointerEvent.addEventListenerWithOptions(target, type, listener, options);

// Emulate `click` event via `touchend` event.
// Default emulator is disabled by `event.preventDefault()`.
// Also, this has to be called before attaching listeners that call `event.preventDefault()` (e.g. `addStartHandler()`).
PointerEvent.initClickEmulator(element, moveTolerance, timeTolerance);
// `Event` object that is passed to listeners has `emulated` property that is `true`.

// Emulate `dblclick` event via `touchend` event.
// Default emulator is disabled by `event.preventDefault()`.
// Also, this has to be called before attaching listeners that call `event.preventDefault()` (e.g. `addStartHandler()`).
PointerEvent.initDblClickEmulator(element, moveTolerance, timeTolerance);
// `Event` object that is passed to listeners has `emulated` property that is `true`.