Javascript 加载css下拉子菜单时多次触发鼠标悬停事件

在我的应用程序中，我创建了一个下拉菜单，其中的子菜单将来自服务器端 下面是html

        <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cog"></i></a>
                <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">
                    <li class="dropdown-submenu dropdown-menu-right favProperties">
                        <a tabindex="-1" href="#" class="favPropertiesLink">Favorites</a>
                    </li>
                </ul>
            </li>

但鼠标悬停事件会多次触发

下面是我的css

.dropdown-submenu{position:relative;}
.dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-menu-right {margin-left:0;}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100% !important;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}


.dropdown-menu.dr_after_before:before {
        border-width: 0;
    margin-left: 0;

}

.dropdown-menu.dr_after_before:after {
        border-width: 0;
    margin-left: 0;

}

ul.dropdown-menu.nitin {
    display: block;
}

ul.dropdown-menu.dropdown-menu-right,ul.dropdown-menu.dr_after_before {
    border-radius: 10px !important;
    padding: 2px;
    /*min-width: 224px !important;*/
}

---

可能出现什么问题？

您是否尝试将事件更改为

mouseenter

？@Zamboney是的，我尝试过。但同样的问题不是“on”方法，而是使用“one”方法，看看它是否有用。另外，

if（$（e.target）.attr（'class'）==“favPropertiesLink”）{

是不必要的，因为它的计算结果总是

true

@MihirSolanki可以使用“one”方法，但问题是，若数据在服务器上更新，那个么它将不会反映在下拉列表中，因为它不会再次触发。

.dropdown-submenu{position:relative;}
.dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-menu-right {margin-left:0;}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    right: 100% !important;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}


.dropdown-menu.dr_after_before:before {
        border-width: 0;
    margin-left: 0;

}

.dropdown-menu.dr_after_before:after {
        border-width: 0;
    margin-left: 0;

}

ul.dropdown-menu.nitin {
    display: block;
}

ul.dropdown-menu.dropdown-menu-right,ul.dropdown-menu.dr_after_before {
    border-radius: 10px !important;
    padding: 2px;
    /*min-width: 224px !important;*/
}