Log all pointer events (mouse and touch gestures)

log_pointer_events.js

(function () {
  var span, eventTypes = [
    'click', 'mousedown', 'mouseup', 'mouseover', 'mousemove', 'mouseout',
    'touchstart', 'touchend', 'touchmove', 'touchcancel', 'touchleave'
  ];
  
  var header = document.querySelector('#header .header-wrap');
  
  // Log a single gesture to the console and show it at the top of the page.
  function logEvent (event) {
    console.log(event.type);
    span = document.createElement('span');
    span.style.color = 'white';
    span.appendChild(document.createTextNode(event.type + ' -> '));
    header.insertBefore(span, header.firstChild);
  }
  
  // Attach event listeners for all gestures.
  for (var i = 0; i < eventTypes.length; i++) {
    document.addEventListener(eventTypes[i], logEvent);
  }
})();