Question

我们有一个input和一个active，它已添加到mousedown并在mouseup上删除。

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

问题是，mouseup在您点击input后，保留并从中移除光标后无法正常工作 - 系统active未被删除。

可以修复吗？

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

我建议倾听焦点和焦点的事件。如果您使用键盘选择输入或将其留在键盘上，则不会触发mouseevents。

你可以这样做：

$('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

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

使用mouseup替换mouseout可获得更好的结果。

由于我们正在使用鼠标，因此它只会在不悬停时删除类。

Answer 6

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

失去悬停后没有鼠标

6 个答案: