Question

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

我遇到的问题是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"/>

修正了它。

当mousedown / mouseup在元素上添加/ removeClass时，不会发出Click事件

1 个答案: