JavaScript中同级元素的停止事件

我有一个事件列表，一个悬停动画序列发生。最后，社交图标出现了。当我将鼠标悬停在社交图标上时，鼠标离开事件会在其他兄弟上触发，社交按钮消失

以下是源代码：

<li>
    <a href="/events/Festival/testing+2-2">
        <div class="upcoming-event" style="background-color: rgb(255, 255, 255);">
            <div class="ue-content">
                <div class="ue-category" style="height: 20px; background-color: rgb(255, 255, 255);"><span><h5>Festival</h5></span></div>
                <img src="http://www.domain.gr/image.php?source=events%2Fce06e21958cd6e9d8c5da37a7f7bf9e9%2Fimages%2Fdefault%2F34-rvca-flyer.jpg&amp;w=150&amp;h=220&amp;out=raw" alt="Event photo">
                <div class="ue-corner" style="width: 0px;"></div>
                <div class="slider" style="height: 50px;">
                    <div class="ue-title"><span><h5 style="padding:5px;">testing 2</h5></span></div>
                    <div class="ue-info"><span>ffs</span></div>
                </div>
            </div>
        </div>
    </a>
    <div class="add-this" style="display: none;">

    <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_preferred_1 addthis_button_facebook at300b" addthis:title="testing 2" addthis:description="ffs" addthis:url="http://www.domain.gr/events/Festival/testing+2-2" title="Facebook" href="#"><span class="at16nc at300bs at15nc at15t_facebook at16t_facebook"><span class="at_a11y">Share on facebook</span></span></a>
    <a class="addthis_button_preferred_2 addthis_button_twitter at300b" addthis:title="testing 2" addthis:description="ffs" addthis:url="http://www.domain.gr/events/Festival/testing+2-2" title="Tweet This" href="#"><span class="at16nc at300bs at15nc at15t_twitter at16t_twitter"><span class="at_a11y">Share on twitter</span></span></a>
    <a class="addthis_counter addthis_bubble_style" style="display: block;" href="#"><a class="addthis_button_expanded" target="_blank" title="View more services" href="#">0</a><a class="atc_s addthis_button_compact"><span></span></a></a>
    <div class="atclear"></div></div>



    </div>
</li>

当我将鼠标悬停在社交图标上时，我想停止动画

下面是JavaScript

var upcomingEvents = 0;
var addthisOver = false;
function fetchEvents(poffset, plimit, uoffset, ulimit){

        //console.log(poffset + ' - ' + plimit + ' - ' + uoffset + ' - ' + ulimit)

        var request = $.ajax({
          url: "/fetch_events.php",
          type: "POST",
          data: {
                'poffset': poffset,
                'plimit' : plimit,
                'uoffset': uoffset,
                'ulimit' : ulimit
                },
          dataType: "json"
        })

        request.done(function(msg)
        {
            //console.log(msg)

            if(msg != null && typeof(msg['promoted'])=='object' && (msg['promoted'] instanceof Array))
            {
                handleEvents(msg['promoted'], msg['promoted'].length, 'promoted');

            }
            if(msg != null && typeof(msg['upcoming'])=='object' && (msg['upcoming'] instanceof Array))
            {
                upcomingEvents = parseInt(upcomingEvents + msg['upcoming'].length);
                handleEvents(msg['upcoming'], msg['upcoming'].length, 'upcoming');
            }
        })

        request.fail(function(jqXHR, textStatus) {
            //alert( "Error: " + jqXHR.responseText );
            //console.log(jqXHR.responseText);
            //console.log(jqXHR.statusText);
            //console.log(textStatus);
            //console.log(jqXHR);
        })

        request.complete(function(){
            //console.log("Ajax request complete!");
        })


}

$(document).ready(function(){
    $("#more-upcoming-events").click(function(){
        new fetchEvents(0,4,upcomingEvents,8);
    });
});


function handleEvents(data, num, type)
{

    var html = '';

    for(i = 0; i < num; i++)
    {
        html += data[i];
    }

    if(type == 'upcoming')
    {


            $('.add-this').mouseenter(function(){
                addthisOver = true;
            })

            $('.add-this').mouseleave(function(){
                addthisOver = false;
            })

        $("#upcoming-event").off();

        $("#upcoming-events").append(html);

        $('.upcoming-event').mouseenter(function(){
            $(this).find('div.ue-category').stop(true,true).animate({height:'0px',queue:false},100);
            $(this).stop(true,true).delay(100).animate({backgroundColor:'#a00000',queue:false},250);
            $(this).find('div.slider').stop(true,true).delay(350).animate({height:'221px',queue:false},250);
            $(this).find('div.ue-corner').stop(true,true).delay(600).animate({width:'58px',queue:false},100);   //58
            $(this.parentNode.parentNode).find('div.add-this').delay(700).fadeIn(100);
        });

        $('.upcoming-event').mouseleave(function(event){


            /*
            trg = $(this.parentNode.parentNode).find(event.target);

            if(event.target != trg[0])
            {

            }
            */

            if(addthisOver == false)
            {
                $(this.parentNode.parentNode).find('div.add-this').fadeOut(100);
                $(this).find('div.ue-corner').delay(100).animate({width:'0px',queue:true},100);
                $(this).find('div.slider').delay(200).animate({height:'50px',queue:true},250);
                $(this).delay(450).animate({backgroundColor:'#ffffff',queue:true},250);
                $(this).find('div.ue-category').delay(700).animate({backgroundColor:'#ffffff',height:'20px',queue:true},100);
            }           
        });

    }
    else if(type == 'promoted')
    {
        var cells = '';
        for(y = 0; y < parseInt(4 - num); y++)
        {
            cells += '<td valign="top"></td>';
        }

        var tableHTML = '<table cellpadding="0" cellspacing="0"><tr>' + html + cells + '</tr></table>';
        $("#top-events-table").html(tableHTML); 
    }

}

var-upcomingEvents=0；
var addthishover=false；
函数fetchEvents（poffset、plimit、uoffset、ulimit）{
//log（poffset+'-'+plimit+'-'+uoffset+'-'+ulimit）
var请求=$.ajax({
url:“/fetch_events.php”，
类型：“POST”，
数据：{
“poffset”：poffset，
“plimit”：plimit，
“uoffset”：uoffset，
“ulimit”：ulimit
},
数据类型：“json”
})
request.done（函数（msg）
{
//控制台日志（msg）
if（msg！=null&&typeof（msg['promoted']）=='object'&&（msg['promoted']instanceof Array））
{
handleEvents（msg['promoted']，msg['promoted'].length，'promoted'）；
}
if（msg！=null&&typeof（msg['coming']）=='object'&&（msg['coming']instanceof Array））
{
upcomingEvents=parseInt（upcomingEvents+msg['coming'].length）；
handleEvents（msg['uncoming']，msg['uncoming'].长度，'uncoming'）；
}
})
请求失败（函数（jqXHR，textStatus）{
//警报（“错误：+jqXHR.responseText”）；
//log（jqXHR.responseText）；
//console.log（jqXHR.statusText）；
//console.log（textStatus）；
//console.log（jqXHR）；
})
请求。完成（函数（）{
//log（“Ajax请求完成！”）；
})
}
$（文档）.ready（函数（）{
$（“#更多即将到来的事件”）。单击（函数（）{
新获取事件（0,4，upcomingEvents，8）；
});
});
函数handleEvents（数据、数量、类型）
{
var html=''；
对于（i=0；i

请尝试以下方法：

$('.upcoming-event').mouseover(function(){

$('.upcoming-event').mouseout(function(event){

编辑：事实上，我知道你的问题是什么——你的“添加此”div和你的社交图标在“即将到来的事件”div之外，导致mouseleave触发。将“addthis”div移到“coming event”div中，您就可以开始了

<li>

        <div class="upcoming-event" style="background-color: rgb(255, 255, 255);">\
          <a href="/events/Festival/testing+2-2">
            <div class="ue-content">
                <div class="ue-category" style="height: 20px; background-color: rgb(255, 255, 255);"><span><h5>Festival</h5></span></div>
                <img src="http://www.evented.gr/image.php?source=events%2Fce06e21958cd6e9d8c5da37a7f7bf9e9%2Fimages%2Fdefault%2F34-rvca-flyer.jpg&amp;w=150&amp;h=220&amp;out=raw" alt="Event photo">
                <div class="ue-corner" style="width: 0px;"></div>
                <div class="slider" style="height: 50px;">
                    <div class="ue-title"><span><h5 style="padding:5px;">testing 2</h5></span></div>
                    <div class="ue-info"><span>ffs</span></div>
                </div>
            </div>
          </a>
            <div class="add-this" style="display: none;">
                <div class="addthis_toolbox addthis_default_style">
                    <a class="addthis_button_preferred_1 addthis_button_facebook at300b" addthis:title="testing 2" addthis:description="ffs" addthis:url="http://www.evented.gr/events/Festival/testing+2-2" title="Facebook" href="#"><span class="at16nc at300bs at15nc at15t_facebook at16t_facebook"><span class="at_a11y">Share on facebook</span></span></a>
                    <a class="addthis_button_preferred_2 addthis_button_twitter at300b" addthis:title="testing 2" addthis:description="ffs" addthis:url="http://www.evented.gr/events/Festival/testing+2-2" title="Tweet This" href="#"><span class="at16nc at300bs at15nc at15t_twitter at16t_twitter"><span class="at_a11y">Share on twitter</span></span></a>
                    <a class="addthis_counter addthis_bubble_style" style="display: block;" href="#"><a class="addthis_button_expanded" target="_blank" title="View more services" href="#">0</a><a class="atc_s addthis_button_compact"><span></span></a></a>
                    <div class="atclear"></div>
                </div>
            </div>
        </div>
</li>

\

sry我忘了现在我发布了它：）问题是即将到来的事件是用标记包装的，如果我添加，它将作为链接使用。将此添加到其中将不起作用。您还可以使用.hover（）将这两个事件处理程序合并为一个，它使用

mouseenter

和

mouseleave

处理程序。：）查看我的最新编辑。将结束语

移到'addthis'div.hmm上面。它不起作用：/alth基于您的概念，我从即将到来的事件中删除了事件侦听器，并将它们添加到

标记上，现在似乎可以正常工作了。还在列表项上添加了一个类。无论如何，这可能是一个更好的解决方案。很高兴你解决了。