title: HTML5 INPUT type='number' - distinguish between focus and value-change mouse clicks
body: <p>In the HTML5 <code>INPUT type='number'</code> the user can change the value by clicking on up/down arrows that are part of the INPUT box. The user might also click in the box for focus or for editing its contents.</p>
  
  <p>Is there any easy way to distinguish between these two activities in the <code>click</code> trigger?</p>
  
  <hr />
  
  <p>from @cvsguimaraes answer, which better demonstrates the theory.</p>
  
  <p>using his methodology, here is my finished(?) version. the purpose: make sure regular <code>change</code> triggers are called when using +/- to change data.</p>
  
  <pre><code>// input/mouseup triggers to call change from +/- mouse clicks
  // want to wait 500ms before calling change in case successive clicks
  render.inputCh = false;
  render.inputCt = 0;
  render.inputFn  = function(e) {
      render.inputCh = true;
  }
  render.mouseupFn  = function(e) {
      if( render.inputCh ) {
          render.inputCh = false;
          render.inputCt++;
          setTimeout( next, 500 );
      }       
      function next() {
          render.inputCt--;
          if( render.inputCt ) return;
          var change = document.createEvent("Event");
          change.initEvent('change',true,true);
          e.target.dispatchEvent(change);
      }
  }
  
  // using input/mouseup triggers
  document.getElementById('number').addListener('input',render.inputFn,true);
  document.getElementById('number').addListener('mouseup',render.mouseuptFn,true);
  
  // normal change trigger - will be called normally and via +/- mouse click
  document.getElementById('number').addListener('change',changeFn,false);
  </code></pre>
  
  <p>on chrome it's working flawlessly so far <em>except</em> that when you remove focus from the ITEM the <code>change</code> trigger will kick in again.  I solved this by having a low level change trigger that stops propagation if the previous change call was from the <code>mouseup</code>.</p>