当mousedown / mouseup在元素上添加/删除class时，不发出Click事件

Question

我将mousedown，mouseup和click处理程序附加到元素。在mousedown上，我向元素添加了一个类，在mouseup上，我删除了该类，在click上，我做了一些工作。 （这是上下文的简化。在我的项目中，click事件由第三方组件处理。）

我遇到的问题是click事件从未发出]在Safari和Firefox中，但是在Chrome中工作得很好。 （我不知道IE做什么。我没有访问权限，也不在乎它。）

代码如下：

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/

没有JQuery的JSFiddle：https://jsfiddle.net/xLskk3po/15/它表明这不是JQuery问题。

Answer 1

我偶然发现了这样的问题：When a mousedown and mouseup event don't equal a click，看来我的问题与此类似。所以我做了一些愚蠢的事情：我放了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"/>

已解决。