title: Detecting number input spinner click
body: <p>I've got a simple number input with a <code>min="1"</code> and <code>max="12"</code> value set, this is used as an hour selector. I'd like it to cycle through the hours, so when you get to <code>12</code> and press the "up" arrow, it goes back to <code>1</code> and vice-versa as well.</p>
  
  <p>Right now I have this mostly working:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var inputTimer = null;
  
  function cycle(element) {
    if (element.attributes.max &amp;&amp; element.attributes.min) {
      var prevVal = element.value;
      inputTimer = setTimeout(function() {
        if (prevVal === element.attributes.max.value) {
          element.value = element.attributes.min.value;
        } else if (prevVal === element.attributes.min.value) {
          element.value = element.attributes.max.value;
        }
      }, 50);
    }
  }
  
  $("input[type='number']")
    .on("mousedown", function(e) {
      //this event happens before the `input` event!
      cycle(this);
    }).on('keydown', function(e) {
      //up &amp; down arrow keys
      //this event happens before the `input` event!
      if (e.keyCode === 38 || e.keyCode === 40) {
        cycle(this);
      }
    }).on('input', function(e) {
      //this event happens whenever the value changes
      clearTimeout(inputTimer);
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="number" min="1" max="12" value="12" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/chrismbarr/pen/zrOgYW?editors=101" rel="noreferrer">Working DEMO</a></p>
  
  <p>The issue I have is that I can't find a way to detect if the arrow spinners in the input have been clicked, or just the input as a whole has been clicked.  Right now it has an issue where it changes the value when you click anywhere in the field when the value is currently at <code>1</code> or <code>12</code></p>
  
  <p>Is there a way to detect if the click event occurs on the spinners/arrows within the text field?</p>