title: Change event being fired on select tag when option isn't clicked
body: <p>I have a change event bound to a select tag. The first option in the select tag is disabled because I am using it as the default text for the menu. If the user clicks on the select tag, hovers over an option without selecting it, and then clicks outside of the select menu twice the change event is being fired. How can I prevent this change event from being fired. </p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;select id="select"&gt;
      &lt;option disabled="disabled" selected="selected"&gt;Title&lt;/option&gt;
      &lt;optgroup label="things"&gt;
          &lt;option&gt;cars&lt;/option&gt;
          &lt;option&gt;boats&lt;/option&gt;
          &lt;option&gt;world&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The jQuery</p>
  
  <pre><code>$('#hide').click(function(){
      $('#select').hide();
  });
  $('#show').click(function(){
      $('#select').show();
  });
  $('#select').change(function(){
      alert($(this).val());
  });
  </code></pre>
  
  <p>The code is just a sample of what my problem is. I added the buttons because in my real code I am hiding the select menu when the user clicks outside of it. </p>
  
  <p>Here is a <a href="http://jsfiddle.net/TPpD6/1/" rel="nofollow">fiddle</a> with the above code. </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>After looking at comments it looks to be a firefox specific issue as it works fine in Internet Explorer, Chorme, and Safari. </p>