有趣的jQuery mouseleave行为 [英] Funky jQuery mouseleave behavior

问题描述

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

I have a menu-like drop down container that hides via binding the "mouseleave" event.

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

我遇到的问题是当我的容器的子元素包含一个SELECT对象，其中OPTIONS的SELECT物理地延伸到容器的界限之外。因此，悬停在边界之外的OPTIONS会触发mouseleave事件以触发并关闭我的下拉菜单。 SELECT是容器的子代，所以在这种情况下，我希望mouseleave事件能够识别这个。

The problem I am having is when my container's child elements contain a SELECT object where the OPTIONS of the SELECT physically extend outside the bounds of the container. Consequently, hovering over the OPTIONS outside of the bounds trigger the "mouseleave" event to fire and close my drop down. The SELECT is a child of the container, so in this case I would expect the mouseleave event to recognize this.

推荐答案

在Blocka的解决方案上，因为它不能正常使用Firefox：

An update on Blocka's solution as it doesn't work with Firefox correctly:

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

这篇关于有趣的jQuery mouseleave行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！