时髦的jQuery鼠标删除行为

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

1.
2.
3.
4.
5.

---

我遇到的问题是，当容器的子元素包含一个SELECT对象时，SELECT的选项实际扩展到容器的边界之外。因此，将鼠标悬停在边界之外的选项上会触发“mouseleave”事件并关闭我的下拉列表。SELECT是容器的子级，因此在本例中，我希望mouseleave事件能够识别它。

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

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

大多数渲染器（我想除了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：实际上，当

“窗口”打开时，Safari根本不会发射

mouseleave

（或

mouseout

）。

谢谢！事实上，我昨晚找到了这个问题的另一个答案，与你发布的答案非常相似

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

---

e.fromElement对象给出了SELECT中选项对象的计数。其他HTML标记未定义此对象。我还没有尝试过你的解决方案，但这对我来说也很有效。

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

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

---

一个非常简单有效的解决方案是在执行操作之前控制鼠标指针坐标。 如果容器没有聚焦到元素“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);
        });

$（'div#u solapa_lateral'）.bind（“mouseenter”，function（）{
$（this.animate（{left:'0'}，500）；
});
$（'div#u solapa_lateral'）.bind（“mouseleave”，函数（e）{
如果（e.clientX>360 | | e.clientY625）
$（this.animate（{left:'-320'}，500）；
});

clientX和clientY到“

位置：相对；

”

---

pageX和pageY到“

位置：绝对；

”

为什么不使容器始终足够大以容纳其子容器？选项的数量远远大于包含的元素。我想让UI尽可能简单。谢谢你的回复。理想情况下，我希望在离开选项标记而不返回SELECT或containing DIV时触发mouseleave事件。诀窍是避免将事件绑定到选项标记。我可以尝试一些小技巧，但我正在寻找一个更核心的结构化解决方案。

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