Handle multiple events from input devices

It uses event locks to define the primary/currently input device. Switch devices (add a touch screen) or view from a smart phone

by cent cent

HTML

<div class="banner-message alt">
  <p>0</p>
  <button id='add'>Add</button>
  <p class="info-medium"></p>
  <p class="info-small"></p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

.info-medium {
  font-size: 16px;
}

.info-small {
  font-size: 14px;
}


button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  margin: 20px;
}

.banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

.banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

/*
 * Isolated context A
 * ==================
 * The event lock library.
 */
(function(utils, $, window, document, undefined){

/**
 * @summary
 * utils.getEventLock
 * ------------------
 * @desc
 * Set it as a go-no-go switch at the begining of a starting event handler and 
 * forget it. Similar call `utils.deleteEventLock(key, eventLock)` at the 
 * begining of the corresponding ending event handler. It is used for handlers 
 * on multiple events for different devices that we don't want to run multiple 
 * times.
 * 
 * It operates on a private variable visible in an isolated context with name
 * `eventLock` and uses another `eventLockDelay`; both are passed as arguments.
 * 
 *  `eventLock` should be declared as an empty object that will be filled with
 * objects '{primary: <event type>, pid: <integer>}'.
 * 
 * `eventLockDelay` should be assigned an integer denoting a time frame greater 
 * than the execution duration of the starting event handler.
 * 
 * If hardware changes during a session, just press input device more than 
 * `eventLockDelay` to make it primary. See {@link utils.setEventLock} and 
 * {@link utils.deleteEventLock}.
 * @function utils.getEventLock
 * @param {Object} evt The event object
 * @param {String} key The key in the private variable `eventLock` for a pair of
 *    event handlers
 * @param {Object} eventLock A private object of objects 
 *    '{primary: <event type>, pid: <integer>}'
 * @param {Object} eventLockDelay A private variable for primary event detection
 *    on a continuous press
 * @return {Boolean} True for the primary event at the specific hardware operated
 *    in user's machine at that time
 */
utils.getEventLock = function(evt, key, eventLock, eventLockDelay){
   if(typeof(eventLock[key]) == 'undefined'){
      eventLock[key] = {};
      eventLock[key].primary = evt.type;
      return true;
   }
   if(evt.type == eventLock[key].primary)
      return true;
   else
      return false;
   
   eventLock[key].pid =...