javascript - jQuery 多个事件同时发生

Question

我遇到了事件堆积的问题。我有一个大图标矩阵，当我将鼠标悬停在其中一个图标上时，文本框会向下滑动。第一次尝试一切都很好，但是如果我再次将鼠标移出并悬停在同一个对象上 - 会发生事件碰撞，盒子上下滑动或永远不会显示，箭头指针消失等。我尝试放置一个警报，鼠标悬停在同一对象上的次数越多，收到的警报就越多(3 次鼠标悬停 = 3 次警报)。

这是我的 html:

<div class="app">
    <a href="#appinfo-1"><img src="images/app001.png" alt="" /></a>
    <div class="apparrow"></div>
    <div id="appinfo-1" class="appbody">                            
        <div><img src="images/apptop.png" alt="" /></div>
        <div class="appwrapper">
            <div class="leftappborder"></div>
            <div class="appcontent">
                <h1>Web Based Administration (CMS)</h1>
                <p class="apptext">Lorem ipsum dolor sit amet. </p>
                <p class="incltick">Included</p>
            </div>                                  
            <div class="rightappborder"><!-- --></div>
        </div>                      
        <div><img src="images/appbottom.png" alt="" /></div>
    </div>
</div>

这是我的 jQuery:

$(function(){
$(".app > a").mouseover(function() {

//some code deleted here

    var currentactive = $(this).attr("href");       
        // activate|deactivate infoblock
        $(currentactive).parent(".app").hover(
            function() {
                $(currentactive).queue(function() {
                    $(this).siblings(".apparrow").slideToggle(150);
                    $(this).css({"visibility":"visible"}).slideToggle(800, incltick);
                    $(this).dequeue();
                });                 
            },                  
            function() {
                $(currentactive).queue(function() {
                    $(this).css({"visibility":"hidden"}).slideToggle(800, incltick);                        
                    $(this).siblings(".apparrow").slideToggle(150); 
                    $(this).parent(".app").animate({marginBottom:0 +"px"}, 800, defaultState);  
                    $(this).dequeue();
                });
            }
        );
    }       
});

});

Answer 1

在您的mouseover内部，您正在调用$(currentactive).parent(".app").hover(...。

这意味着每次您将鼠标悬停在上方时，都会附加一个额外的悬停。因此，如果您将鼠标悬停 3 次，则会获得 3 次悬停，并且事件会触发 3 次。您不应该将事件附加到将再次触发的其他事件中。如果确实需要，请设置一个标志并确保它只附加一次。