Click event not emitted when mousedown/mouseup do add/removeClass on element

Question

I'm attaching mousedown, mouseup and click handlers to an element. On mousedown I add a class to the element, on mouseup I remove the class, and on click I do some work. (This is a simplification of the context. In my project the click event is handled by a 3rd party component.)

The problem I'm having is that the click event is never emitted 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.)

The code is as follows:

HTML:

<div id="clickme">
    <div class="normal"></div>
    <div class="highlight"></div>
</div>
<input type="text" id="textinput"/>

CSS:

#clickme:not(.active) > .highlight {
    display: none;
}

#clickme.active > .normal {
    display: none;
}

.normal, .highlight {
    width: 100px;
    height: 100px;
}

.normal {
    background: blue;
}

.highlight {
    background: red;
}

JS:

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());
});

JSFiddle: https://jsfiddle.net/xLskk3po/14/

JSFiddle without JQuery: https://jsfiddle.net/xLskk3po/15/ It shows that it's not a JQuery problem.

Answer 1

I stumbled upon this SO question: When a mousedown and mouseup event don't equal a click and it looks like my issue is similar to that. So I did something silly: I put a transparent, absolutely positioned element on top.

HTML:

<div id="clickme">
    <div class="normal"></div>
    <div class="highlight"></div>
    <div class="abs"></div> <!-- this is the absolute element, covering #clickme -->
</div>
<input type="text" id="textinput"/>

That fixed it.