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>
<p class="banner-message info-small">
  Update as <a href="https://jsfiddle.net/centurianii/qs8dvx2g/">library</a>
</p>

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

$(function(){

/*
 * Private variables
 * =================
 */
/*
 * Primary events for handlers that respond to more than one event and devices  
 * that produce more than one, like touch devices.
 * The first event in browser's queue hinders all subsequent for the specific 
 * key intended to be used by a event handler.
 * Every key points to an object '{primary: <event type>}'.
 */
var eventLock = {};

/*
 * Process ids based on keys.
 */
var pids = {};

/*
 * Some default values.
 */
var defaults = {
   pressDelay: 100 // ms between successive calls on press events by mouse or touch
}

/*
 * Event lock functions
 * ====================
 */
function getEventLock(evt, key){
   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;
}

function primaryEventLock(evt, key){
   eventLock[key].primary = evt.type;
}

/*
 * Event handlers
 * ==============
 */
$("#add").on("touchstart mousedown", addStart);
$("#add").on("touchend mouseup", addEnd);
function addStart(evt){
   // race condition between 'mousedown' and 'touchstart'
   if(!getEventLock(evt, 'add'))
      return;
   
   // some logic
   now = new Date().getTime();
   press = -defaults.pressDelay;
   task();
   
   // enable event lock and(?) event repetition
   pids.add = setTimeout(closure, defaults.pressDelay);
   
   function closure(){
   		// some logic(?): comment out to disable repetition
      task();
      
      // set primary input device
      primaryEventLock(evt, 'add');
      
      // enable event repetition
      pids.add = setTimeout(closure, defaults.pressDelay);
   }
}
function addEnd(evt){
      clearTimeout(pids.add);
}

// irrelevant task
var press;	// irrelevant!
function task(){
	// find elements
var $result = $(".banner-message > p").eq(0),
    $device = $(".banner-message > p").eq(1),
    device,
    $press =...