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物理地扩展到容器的边界之外。因此，将鼠标悬停在边界之外的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

一个非常简单有效的解决方案是在执行操作之前控制鼠标指针坐标。如果容器没有焦点而专注于元素＆＃34;选择＆＃34;，它会检查指针。如果指针位于容器内，则它不执行任何操作，但是如果这是执行容器元素操作

 $('#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到＆＃34; position:relative;＆＃34; pageX和pageY到＆＃34; position:absolute;＆＃34;

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

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

我总是对这种程度的黑客用户事件感到紧张，因为很可能你最终会把某个浏览器留在一个完全无法使用的状态。

Answer 5

大多数渲染器（除了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：实际上，当mouseleave“窗口”打开时，Safari根本不会触发mouseout（或<select>）。

时髦的jQuery mouseleave行为

5 个答案: