6

我有一个类似菜单的下拉容器，它通过绑定“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 物理地延伸到容器的边界之外。因此，将鼠标悬停在边界之外的 OPTIONS 上会触发“mouseleave”事件来触发并关闭我的下拉菜单。SELECT 是容器的子项，因此在这种情况下，我希望 mouseleave 事件能够识别这一点。

4

5 回答 5

4

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

 $('#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;"

于 2012-10-31T23:01:59.797 回答
4

Blocka 解决方案的更新，因为它不能正确地与 Firefox 一起使用：

if ((typeof e.fromElement != 'undefined' && !e.fromElement.length) ||
    (typeof e.fromElement == 'undefined' && e.target.tagName != 'SELECT')) {
    // perform your mouseleave logic
}
于 2011-08-16T13:29:10.330 回答
2

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

.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 标记，此对象未定义。我还没有尝试过您的解决方案，但这也适用于我。

于 2010-01-20T16:37:35.393 回答
1

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

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

于 2010-01-19T20:39:57.437 回答
1

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

编辑：......但也许是这样。这适用于我在 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：实际上，当“窗口”打开时，Safari 根本不会触发mouseleave（或）。mouseout<select>

于 2010-01-19T20:50:07.773 回答