title: Click event not emitted when mousedown/mouseup do add/removeClass on element
body: <p>I'm attaching <code>mousedown</code>, <code>mouseup</code> and <code>click</code> handlers to an element. On <code>mousedown</code> I add a class to the element, on <code>mouseup</code> I remove the class, and on <code>click</code> I do some work. (This is a simplification of the context. In my project the <code>click</code> event is handled by a 3rd party component.)</p>
  
  <p>The problem I'm having is that the <strong><code>click</code> event is never emitted</strong> in Safari and Firefox, but it works just fine in Chrome. (I don't know what IE does. I don't have access to it, and don't care about it.)</p>
  
  <p>The code is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="clickme"&gt;
      &lt;div class="normal"&gt;&lt;/div&gt;
      &lt;div class="highlight"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="text" id="textinput"/&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#clickme:not(.active) &gt; .highlight {
      display: none;
  }
  
  #clickme.active &gt; .normal {
      display: none;
  }
  
  .normal, .highlight {
      width: 100px;
      height: 100px;
  }
  
  .normal {
      background: blue;
  }
  
  .highlight {
      background: red;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var clickme = $('#clickme');
  var textinput = $('#textinput');
  
  clickme.on('mousedown', function(e) {
      clickme.addClass('active');
      // ^-- comment this out and the click event starts working
  });
  
  clickme.on('mouseup', function(e) {
      clickme.removeClass('active');
      // ^-- comment this out and the click event starts working after the second click
  });
  
  clickme.on('click', function(e) {
      e.preventDefault();
      textinput.val(Date.now());
  });
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/xLskk3po/14/" rel="nofollow noreferrer">https://jsfiddle.net/xLskk3po/14/</a></p>
  
  <p>JSFiddle without JQuery: <a href="https://jsfiddle.net/xLskk3po/15/" rel="nofollow noreferrer">https://jsfiddle.net/xLskk3po/15/</a> It shows that it's not a JQuery problem.</p>