时髦的 jQuery mouseleave 行为

Question

我有一个类似菜单的下拉容器，通过绑定“mouseleave”事件来隐藏。

<div id="container">
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
</div>

我遇到的问题是，当我的容器的子元素包含一个 SELECT 对象时，其中 SELECT 的 OPTIONS 物理延伸到容器的边界之外。因此，将鼠标悬停在边界之外的选项上会触发“mouseleave”事件来触发并关闭我的下拉菜单。 SELECT 是容器的子级，因此在本例中我希望 mouseleave 事件能够识别这一点。

Answer 1

Blocka 解决方案的更新，因为它无法在 Firefox 中正常工作：

if ((typeof e.fromElement != 'undefined' && !e.fromElement.length) ||
    (typeof e.fromElement == 'undefined' && e.target.tagName != 'SELECT')) {
    // perform your mouseleave logic
}

Answer 2

一个非常简单有效的解决方案是在执行操作之前控制鼠标指针坐标。
如果容器失去焦点而将焦点集中在“select”元素上，它会检查指针。如果指针位于容器内部，则它不会执行任何操作，但是如果这是容器元素，则会执行

 $('#div_solapa_lateral').bind("mouseenter",function(){
            $(this).animate({left:'0'},500);
        });

    $('#div_solapa_lateral').bind("mouseleave",function(e){
            if ( e.clientX>360 || e.clientY<60 || e.pageY>625 )
            $(this).animate({left:'-320'},500);
        });

clientX 和 clientY 到“position:relative;”的 操作
pageX 和 pageY 为“position:absolute;”

Answer 3

感谢无眼睑！实际上，我昨晚找到了这个问题的另一个答案，与您发布的内容非常相似。

.bind("mouseleave", function(e) { // ANSWER HERE!!!
    if (!e.fromElement.length) {
        _state.filterTrigger.data("open", false);
        setTimeout(function() { _toggleFilter(_state.filterTrigger); }, 2000);
    }
});

e.fromElement 对象给出 SELECT 中 OPTION 对象的计数。对于其他 HTML 标记，该对象未定义。我没有尝试过你的解决方案，但这也适用于我。

Answer 4

也许当下拉菜单展开时，您可以设置一个标志。选择项目后清除标志。当发生鼠标离开时，除非标志清除，否则不要隐藏菜单。

不过，我总是对这种程度的黑客 UI 事件感到紧张，因为很可能最终会让某些浏览器处于完全无法使用的状态。

Answer 5

大多数渲染器（我认为除了 Gecko 之外）都在单独的“窗口”中实现打开的 菜单及其选项，而不是作为页面上的元素。那么，页面不一定知道用户与打开的菜单的交互。您不太可能在所有主要浏览器上实现所需的效果...

编辑：...但也许如此。这对我在 Safari 和 Firefox 中有效。我现在无法在 IE 中进行测试，但请尝试一下：

var timer;
$('#container').mouseleave(function(e) {
    if($(e.target).parents('#container').length) {
        return;
    }
    timer = setTimeout(function() {
        $('#container select').blur();
    }, 50);
}).mouseenter(function(e) {
    if(timer) {
        clearTimeout(timer);
    }
});

编辑 2：实际上，当 < code><选择>“窗口”已打开。