title: "Combine" events in jQuery
body: <h2>TL;DR:</h2>
  
  <p>How can I combine the three "touch" browser events with a delay to emulate a "long press" event and make it available for jQuery to attach to any appropriate DOM element?</p>
  
  <h2>Full Question</h2>
  
  <p>Since I believe iPad and other touchscreen devices most reliably only trigger the touchstart, touchmove, and touchend events, I guess a framework - of one level of complexity or another - is needed in order to react to events like gestures, long presses, and multiple touches. </p>
  
  <p>I'm not ready to add one of the mobile frameworks in my current project, so to that end, I've added a bit of code that seems to work well enough at emulating a "long" press, and would allow someone to come along and either trigger the predefined handler or add an additional handler for such an event:</p>
  
  <pre><code>var touchTimeout = null;
  var $element = null;
  
  $('div#SomeIdOnADIVElementOrTwo')
      .on('touchstart', function(){
          $element = $(this);
          //not sure if this is absolutely necessary, but it was based off an Internet resource found when it didn't work like I wanted it to - and it works, so...
          touchTimeout = setTimeout(
              function($element){
                  return function(){
                      $($element).trigger('longpress');
                  };
              }($element), 1000
          );
      })
      .on('touchend touchmove', function(){
          clearTimeout(touchTimeout);
      })
      .on('longpress', function(){
          $(this).dblclick();
      });
  </code></pre>
  
  <p>This, however, is currently restricted to whatever selector or jQuery object I pass in to the original jQuery omni-function call on the first line (in my case, a div with the id <code>SomeIdOnADIVElementOrTwo</code>). What I'd like to do is define the three events 'touchstart', 'touchmove', and 'touchend' (along with the delay/timeout, etc) as a standard "event" that someone could "handle" on any "touchable" DOM object. </p>
  
  <p>Is this as simple as changing my selector to <code>*</code>? I'm pretty sure this would work conceptually, but I can't help but think that could very well be unmanageable on a page with a large number of elements - or am I possibly confused as to how event handlers are registered? Would I perhaps be better off extending jQuery with a <code>.longPress()</code> function (in the same vein as the <code>.click()</code> and <code>.dblClick()</code> functions)? Is this unfeasible or impossible? Is it incredibly simple and I'm missing something?</p>