javascript - Jquery:为什么如果我在其他内部有一个jquery触发器，第二个触发器会多次触发？

Question

我有以下代码来切换垂直下拉菜单。当我在“ul > li > a”中多次鼠标输入并且在选择子菜单并进入其中后，第二个触发器多次触发时，就会出现问题。

$('nav > ul > li > a').on('mouseenter',function(e){
    var currentID = this;
    var index = $('ul.topnav > li > a').index(this);
    $(this).addClass('selected');
    $('nav ul ul').css('margin-top',(38*parseInt(index)));

    $(this).parent().find('ul').on('mouseenter',function(e){
        //fire several times
        console.log('hover');           
        $(currentID).addClass('selected');
    }).on('mouseleave',function(e){
        $(currentID).removeClass('selected');
        //fire several times
        console.log('end hover');
    });

}).on('mouseleave',function(e){
    $(this).removeClass('selected');
);

Answer 1

每次执行外部 mouseenter 回调时，它都会将新的附加事件处理程序附加到 ul (这将执行与之前附加的处理程序相同的操作。

当鼠标进入该 ul 时，将调用所有附加的事件处理程序。

您只应附加事件处理程序一次，而不是在每个 mouseenter 上附加一次。