JS use mousemove or touchmove

Question

I want to know how it is possible to use mousemove or touchmove depending on which device is using the application. I want touch-enabled devices to listen to touchmove and desktop-devices to use mousemove instead. I also want to use offsetX and offsetY which seems to be missing on mobile devices =/

Answer 1

you can wrap the events in an object and set them according to is_touch_supported:

var body = document.querySelector('body'),
    is_touch_supported = ('ontouchstart' in window) ? true : false,
    EVENTS = {
      POINTER_DOWN : is_touch_supported ? 'touchstart' : 'mousedown',
      POINTER_UP   : is_touch_supported ? 'touchend'   : 'mouseup',
      POINTER_MOVE : is_touch_supported ? 'touchmove'  : 'mousemove'
    };

Now you can use the events like that:

body.addEventListener(EVENTS.POINTER_MOVE, function (e) {
  e.preventDefault();

  // normalize event so you can use e.offset X/Y
  if(is_touch_supported){
    e = e.changedTouches[0];
    e.offsetX = e.pageX - e.target.offsetLeft;
    e.offsetY = e.pageY - e.target.offsetTop;
  }

  // ...
});