javascript - 失去悬停后没有 mouseup

Question

http://jsfiddle.net/rpfHw/

我们有一个inputand 类active，在 上添加mousedown和删除mouseup。

当鼠标光标放在输入上时效果很好。

问题是，单击，按住并从中删除光标mouseup后不起作用-类未删除。inputactive

可以修复吗？

Answer 1

那是因为mouseup没有在输入上触发，而是在它之外触发。为此，您可以在对象上使用通用事件处理程序document：

$(document).mouseup(function() {
    $('input.active').removeClass('active');
});

http://jsfiddle.net/rpfHw/1/

Answer 2

我将提出一个 CSS 解决方案。您可以使用以下规则达到相同的效果：

input:active{
    outline: 10px solid #000;
}

(IE8+)

http://jsfiddle.net/rpfHw/6/

Answer 3

我建议收听事件 focusin 和 focusout。如果您使用键盘选择输入或将其保留在键盘上，则不会触发鼠标事件。

你可以这样做：

$('input').on('focusin focusout', function(event) {
    $(this).toggleClass('active', event.type==='focusin');
});

您所描述的问题仍然会发生，因为如果您在内部按下鼠标并将鼠标拖到外部，该元素仍将具有焦点，但我想这没关系，因为输入仍然具有焦点。

如果您想完全使用鼠标事件来处理它，并且还想解决将鼠标拖到外面的问题，那么您将不得不在 dom 对象上使用鼠标事件来实现它，然后检查处理程序中的正确元素。

Answer 4

对我来说工作正常，请检查以下代码：

$('input').bind('click mouseup mousedown', function(event) { // 点击事件的一些代码

if (event.type == 'mousedown'){
    console.log('mousedown');    
    $(this).addClass('active');
    }


if (event.type == 'mouseup'){
    console.log('mouseup');
    $(this).removeClass('active');
}

//console.log(event.type);

}); http://jsfiddle.net/rpfHw/3/

最好的

Answer 5

好吧，我尝试了很多方法来解决这个问题。

更好的结果是用 withmouseup替换mouseout。

由于我们使用的是鼠标，它只是在未悬停时删除类。

Answer 6

我最近遇到了同样的问题。我通过向目标元素添加mouseleave事件来解决此问题。