如何检测鼠标在jQuery中的子元素上？

Posted 2023-03-06

【中文标题】如何检测鼠标在jQuery中的子元素上？

【英文标题】：How to detect mouse is over a child element in jQuery?

【发布时间】：2014-01-25 03:53:21

【问题描述】：

我在 html 中有一个 menu-submenu-subsubmenu 结构，如下所示：

<menu>
    <li><a href="...">Item 1</a></li>
    <li><ul>
            <li><a href="...">Subitem 1</a></li>
            <li><a href="...">Subitem 2</a></li>
            <li><ul>
                    <li><a href="...">Sub-subitem 1</a></li>
                    <li><a href="...">Sub-subitem 2</a></li>
                    <li><a href="...">Sub-subitem 3</a></li>
                </ul>
                <a href="...">Subitem 3</a></li>
            <li><a href="...">Subitem 4</a></li>
        </ul>
        <a href="...">Item 2</a>
    </li>
    <li><a href="...">Item 3</a></li>
    <li><a href="...">Item 4</a></li>

...使用这种 css 格式：

menu 
    display: block;
    width: 200px;

/* hide subitems */
menu li ul,
menu li ul li ul 
    display: none;
    position: absolute;

/* set up positions */
menu li ul 
    left: 200px;
    width: 200px;

menu li ul li ul 
    left: 400px;
    width: 200px;

我使用这个 jQuery 代码：

$(function() 
    /* hide all submenu */
    $('menu').find('ul').hide();
    /* show submenu on mouseenter */
    $('menu li a').mouseenter(function() 
        $(this).parent().children('ul').show();
    ).mouseleave(function() 
        $(this).parent().children('ul').hide();
    );
);

如何检测鼠标是否将元素留给他们的孩子？或者如果有必要，我怎样才能让子元素留下来？

【问题讨论】：

你不需要像menu > ul > li > ul这样的东西吗

我认为不是标签名称才是本质。如果这是问题，请将其更改为 <nav>。 ;)

这有帮助吗？ jsfiddle.net/xSN2S

您的 HTML 无效。 li 应该在 ul 内。

您的 HTML 无效，但不是因为 @putvande 或 @Mr.外星人说过。 To fix it, you need to add a [type="toolbar"] attribute to your <menu> element。或者，如果您的菜单旨在包含导航链接，而不是 Web 应用程序的交互式 javascript 驱动控件，you should be using the <nav> element with a <ul> or <ol> child element。

【参考方案1】：

把你的代码改成这样：

$(function() 
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */ 

// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() 
    var time = new Date().getTime();
    $(this).parent().find('ul').show().data('showing-time', time);
).mouseleave(function() 
    var leaveTime = new Date().getTime();
    var $this = $(this);
    window.setTimeout(function () 
        var $ul = $this.parent().find('ul');
        var beginTime = $ul.data('showing-time') || 0;
        if (leaveTime > beginTime) 
            $this.parent().find('ul').hide().data('showing-time', 0);
        
    , 100);
);
);

希望这会有所帮助。

更新 代码已更新。

我建议把子菜单放在父菜单项旁边（这里是指li > a元素）以获得更好的结果。

【讨论】：

好主意，但是这个解决方案在鼠标进入之前隐藏子项。

在.mouseleave 部分需要检查鼠标在哪里...在子/兄弟元素或其他任何地方？我能以某种方式做到这一点吗？

【参考方案2】：

这就是我的处理方式。您根本不需要 javascript，至少不需要简单的隐藏/显示。但是，如果您想添加延迟，我强烈建议您仅使用 jquery 来添加/删除带有 settimeout 的适当 css 类。

css:

.menu 
    position: relative;
    display: inline-block;


.submenu 
    display: none;
    position: absolute;
    left: 100%;


.menu li:hover > .submenu, .submenu.show 
  display: inline-block;

html:

<ul class="menu">
    <li><a href="...">Item 1</a></li>
    <li><ul class="submenu">
            <li><a href="...">Subitem 1</a></li>
            <li><a href="...">Subitem 2</a></li>
            <li><ul class="submenu">
                    <li><a href="...">Sub-subitem 1</a></li>
                    <li><a href="...">Sub-subitem 2</a></li>
                    <li><a href="...">Sub-subitem 3</a></li>
                </ul>
                <a href="...">Subitem 3</a></li>
            <li><a href="...">Subitem 4</a></li>
        </ul>
        <a href="...">Item 2</a>
    </li>
    <li><a href="...">Item 3</a></li>
    <li><a href="...">Item 4</a></li>
</ul>

js:

$('body').on('mouseleave','.submenu', function(e) 

    var jTarget = $(e.currentTarget).addClass('show');

    setTimeout(function() 
            jTarget.removeClass('show');
    , 500);
)

查看这个带有 js 延迟的 jsfiddle： http://jsfiddle.net/LxL4N/1/