jQuery: mouseenter, mouseover, mouseleave, mouseout on select答案

【问题标题】：jQuery: mouseenter, mouseover, mouseleave, mouseout on selectjQuery: mouseenter, mouseover, mouseleave, mouseout on select
【发布时间】：2012-08-17 12:28:54
【问题描述】：

我有一个这样的选择框：

<select id="se">
   <option>An option</option>
   <option>Another option</option>
</select>

当用户在选择框上输入鼠标时，我想显示一个文本，如果用户用鼠标离开该区域，我想隐藏。像这样：

jQuery('#se').mouseover(function(){
   someThing.show();
}).mouseout(function(){
   someThing.hide();
});

第一步工作正常。当我输入选择框时，将显示文本。当我现在单击选择框以选择一个选项时，当我将鼠标悬停在一个选项上时将触发“mouseout”事件 - 但选项元素在选择元素中......我不知道为什么，但是 jQuery似乎认为我不在选择框内。

有什么办法可以不用修改HTML代码吗？

编辑：我试过 mouseenter、mouseover、mouseout、mouseleave ...

【问题讨论】：

这是正确的行为。当您单击一个元素并且列表消失时，您不再位于列表之上。
正如@insertusernamehere 提到的，这是正确的行为。 jsfiddle.net/Pnm7J
究竟应该发生什么？ “某事”是否应该停留更长时间而不是在选择后隐藏？
我认为问题在于将光标从选择框移动到选项列表会导致红色元素被隐藏。

标签： jquery mouseevent mouseover mouseenter mouseleave

【解决方案1】：

使用变量isFocus

JavaScript/Jquery：

var isFocus = false;
jQuery('#se').mouseover(function(){
   someThing.show();
}).mouseout(function(){
    if(!isFocus)
    {
       someThing.hide();
    }
}).focus(function(){
    isFocus = true;
}).blur(function(){
    someThing.hide();
    isFocus = false;
});

【讨论】：

是的。这将是可行的 - 但我需要更改 HTML。这是一个解决方案 - 但不是唯一的 js 解决方案。不过谢谢。
这如何改变行为？

【解决方案2】：

试试这个：

var $someThing = $('#something')
var stop;

jQuery('#se').hover(function(){
    $someThing.stop().fadeIn();
    clearTimeout(stop)
}, function(){
     stop = setTimeout(function(){
          $someThing.stop().fadeOut();
     }, 2000)
});

Fiddle

【讨论】：

【解决方案3】：

如果您想要一个纯 JS 解决方案，真正保持鼠标悬停事件在选项上触发的最简单方法是按照 Allen 的建议用 <div> 包装它。

我会简单地在你所有的<select> 周围做一个快速的.wrap() method，然后在它们周围自动添加一个 div。然后像这样设置实时 mouseover/mouseout 事件：

jsFiddle DEMO

$('select').wrap('<div class="seWrapper" />');

$(document).on('mouseover', '.seWrapper', function (e) {
        console.log('mouseIN');
});

$(document).on('mouseout', '.seWrapper', function (e) {
        console.log('mouseOUT');
});

【讨论】：

【解决方案4】：

点击时解除mouseout事件绑定，mouseover绑定mouseout事件。

【讨论】：

【解决方案5】：

我使用了一个计时器来防止触发 mouseleave 事件。效果很好。

var timeoutOver;

$("#btn").mouseenter(function () {

    clearInterval(timeoutOver);
    //over event

}).mouseleave(function () {

    timeoutOverPeriod = setTimeout(function() {
            //out event
            $("my-select").blur();
    }, 500);

});

【讨论】：