在 jQuery 中，鼠标事件触发错误的元素。我怎样才能解决这个问题？

Posted

技术标签:

【中文标题】在 jQuery 中，鼠标事件触发错误的元素。我怎样才能解决这个问题？【英文标题】：in jQuery, mouse events trigger wrong element. How can I fix this? 【发布时间】：2021-09-01 04:57:21 【问题描述】：

我正在使用此 html 代码在 Wordpress 网站中开发 Bootstrap 导航栏 ->

<nav id="menu" class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar"
            aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="bs4navbar" class="collapse navbar-collapse">
        <ul id="menu-main" class="navbar-nav mr-auto">

            <li id="menu-item-61"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-61 nav-item"><a
                    href="#"
                    class="nav-link">ITEM 61</a></li>

            <li id="menu-item-59"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-59 nav-item"><a
                    href="#"
                    class="nav-link">ITEM 59</a></li>

            <li id="menu-item-56"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-56 nav-item dropdown">
                <a href="#"
                   class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 56</a>
                <div class="dropdown-menu">
                    <a href="#"
                       class=" dropdown-item">ITEM 56 - A</a><a
                        href="#"
                        class=" dropdown-item">ITEM 56 - B</a></div>
            </li>
            <li id="menu-item-48"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-48 nav-item dropdown">
                <a href="#"
                   class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 48</a>
                <div class="dropdown-menu">
                    <a href="#"
                       class=" dropdown-item">ITEM 48 - A</a><a
                        href="#"
                        class=" dropdown-item">ITEM 48 - B</a><a
                        href="#"
                        class=" dropdown-item">ITEM 48 - C</a><a
                        href="#"
                        class=" dropdown-item">ITEM 48 - D</a></div>
            </li>

            <li id="menu-item-53"
                class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-53 nav-item dropdown">
                <a href="#"
                   class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 53</a>
                <div class="dropdown-menu" style="display: none;">
                    <a href="#"
                       class=" dropdown-item">ITEM 53 - A</a><a
                        href="#"
                        class=" dropdown-item">ITEM 53 - B</a></div>
            </li>

        </ul>
    </div>
</nav>

项目56、48和53有.dropdown-menu，基本上当我点击其中一个时，我希望看到子菜单;它的原生 bootstrap.js 脚本不起作用（我不知道原因）。

要解决这个问题，我可以使用此代码触发鼠标事件 ->

<script>

            $(function ($) 

                $nav = $('nav#menu');

                $('.dropdown', $nav).each(function () 

                    console.log('.dropdown ->');
                    console.log($(this));

                    $subMenu = $('.dropdown-menu', $(this));

                    console.log('$subMenu ->');
                    console.log($subMenu);

                    $(this).mouseenter(function () 

                        console.log('mouseenter ->');
                        console.log($(this));

                        $subMenu.show();

                        console.log('$subMenu ->');
                        console.log($subMenu);

                    ).mouseleave(function () 

                        console.log('mouseleave ->');
                        console.log($(this));

                        $subMenu.hide();

                        console.log('$subMenu ->');
                        console.log($subMenu);
                    );

                );

            );

        </script>


$(function($) 

  $nav = $('nav#menu');

  $('.dropdown', $nav).each(function() 

    console.log('.dropdown ->');
    console.log($(this));

    $subMenu = $('.dropdown-menu', $(this));

    console.log('$subMenu ->');
    console.log($subMenu);

    $(this).mouseenter(function() 

      console.log('mouseenter ->');
      console.log($(this));

      $subMenu.show();

      console.log('$subMenu ->');
      console.log($subMenu);

    ).mouseleave(function() 

      console.log('mouseleave ->');
      console.log($(this));

      $subMenu.hide();

      console.log('$subMenu ->');
      console.log($subMenu);
    );

  );

);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav id="menu" class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div id="bs4navbar" class="collapse navbar-collapse">
    <ul id="menu-main" class="navbar-nav mr-auto">

      <li id="menu-item-61" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-61 nav-item"><a href="#" class="nav-link">ITEM 61</a></li>

      <li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-59 nav-item"><a href="#" class="nav-link">ITEM 59</a></li>

      <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-56 nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 56</a>
        <div class="dropdown-menu">
          <a href="#" class=" dropdown-item">ITEM 56 - A</a><a href="#" class=" dropdown-item">ITEM 56 - B</a></div>
      </li>
      <li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-48 nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 48</a>
        <div class="dropdown-menu">
          <a href="#" class=" dropdown-item">ITEM 48 - A</a><a href="#" class=" dropdown-item">ITEM 48 - B</a><a href="#" class=" dropdown-item">ITEM 48 - C</a><a href="#" class=" dropdown-item">ITEM 48 - D</a></div>
      </li>

      <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-53 nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">ITEM 53</a>
        <div class="dropdown-menu" style="display: none;">
          <a href="#" class=" dropdown-item">ITEM 53 - A</a><a href="#" class=" dropdown-item">ITEM 53 - B</a></div>
      </li>

    </ul>
  </div>
</nav>

（出于调试目的，我留下了console.log()）。

当我在它们各自的区域上移动鼠标时，我希望看到子菜单。

（错误的）结果是当我在这 3 个元素中的任何一个中移动鼠标时，它会显示列表中的最后一个 .dropdown-menu。

控制台在.each() 中显示正确的元素，但在触发时它只显示列表中的最后一个.dropdown-menu 元素。

我想不通怎么可能会有这样的事情。

谁能解释发生了什么？ 我该如何解决？

【问题讨论】：

不要在活动中使用它 我应该使用什么？ @abhinavxeon 您的问题在于 javascript 闭包。您在循环中引用 this - 在调用这些函数时，this 是对循环中最后一个元素的引用。您需要存储对this 的引用并在函数中使用它。按照惯例，您通常会看到类似var that = this 的内容，您可以在嵌套函数中使用that。 【参考方案1】：

主要是您在声明变量时缺少var，因此创建全局变量也是如此。

我已经把你的代码整理了一下：

$(function ($) 
    var $nav = $('nav#menu');

    $nav.find('.dropdown').each(function () 
        var $dropdown = $(this);

        $(this).mouseenter(function () 
            var $subMenu = $dropdown.find('.dropdown-menu');
            $subMenu.show();
        ).mouseleave(function () 
            var $subMenu = $dropdown.find('.dropdown-menu');
            $subMenu.hide();
        );
    );
);

【讨论】：

【参考方案2】：

关于评论，我在事件函数中移动了$subMenu，它可以工作。

谢谢skyline3000

<script>

            $(function ($) 

                $nav = $('nav#menu');

                $('.dropdown', $nav).each(function () 

                    $(this).mouseenter(function () 

                        $subMenu = $('.dropdown-menu', $(this));
                        $subMenu.show();

                    ).mouseleave(function () 

                        $subMenu = $('.dropdown-menu', $(this));
                        $subMenu.hide();

                    );

                );

            );

        </script>

【讨论】：

以上是关于在 jQuery 中，鼠标事件触发错误的元素。我怎样才能解决这个问题？的主要内容，如果未能解决你的问题，请参考以下文章

jquery中鼠标移上和移开的动作是啥？

jQuery 鼠标事件

jQuery的鼠标事件总结

JQuery 鼠标事件简介

jquery事件

jQuery事件