Jquery mouseover/mouseout 触发不一致

Question

我有两个可排序列表，一个是嵌套的，鼠标悬停在嵌套可排序列表的 li 元素上。我的问题是当用户在子元素上的列表中快速移动鼠标时，mouseover 和 mouseout 函数被不一致地调用。

这是正在发生的事情的一个示例，您必须将一个窗格拖到列表中，然后将 3-4 个文本框项目拖到窗格中才能看到问题。您可以看到右上角的 2 个数字正在跟踪鼠标的进出。请注意，到目前为止，我只在 Firefox 中测试了我的网站。

example

我的 jquery 代码：

以下是 mouseover 和 mouseout 函数：

$(".pane > li").live("mouseover", function(){
    $("#in").html(in1);
    $(this).children(".test").stop().animate({opacity: 1},400);
    in1++;
});

$(".pane > li").live("mouseout", function(){
    $("#out").html(out1);
    $(this).children(".test").stop().animate({opacity: 0},400);
    out1++;
});

$(".pane > li > *").live("mouseover", function(event){
    event.stopPropagation();
});

$(".pane > li > *").live("mouseout", function(event){
    event.stopPropagation();
});

第一个可排序的列表：

    var counter = 0;
    var height="";
    var in1 =0;
    var out1=0;

$("#left-form-space").sortable({


update: function(ev, ui){
  if (!ui.item.is('.noChange')){
   addNewPane(ui.item);
  }
 },
 start: function(event, ui){
  if (ui.item.is('.noChange')){
   $("#left-form-space").css({'height' : height});
   $("#left-form-space").animate({height: "75px"}, 600, function(){
    $("#left-form-space").css({'height' : 'auto'});
   });
  }
 },
 stop: function(event, ui){
  $item = ui.item;
  if ($item.is('.noChange')){
   $item.css({'height' : '0px'});
   $item.animate({height: "150px"}, 600, function(){
    $item.css({'height' : 'auto'});
   });
  }
 },
 placeholder: '.placeholder-highlight',
 cursor: 'move',
 revert: true
    });

$("ul, li").disableSelection();

我添加嵌套可排序列表的函数：

function addNewPane($item){
    counter++;
    var newID = "pane_" + counter;
    $item.attr("id", newID);

$item.html('').animate({height: "150px"}, 600, function(){
    $item.css({'height' : 'auto'});
    $item.html('<fieldset class="sortable-pane"><div class="pane-nav"><a href="link/to/recycle/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-close">Delete image</a></div><ul class="pane"></ul></fieldset>');
    $("#" + newID + " > fieldset").hide().fadeIn('slow');
    $(".pane").sortable({
        placeholder: 'ui-state-highlight',
        update: function (event, ui){
            if (!ui.item.is('.noChange')){
                if (ui.item.is('.textbox')){
                    $(ui.item).html('<div class="test ui-corner-tl ui-corner-bl">test</div><input class="label" value="First Name:"/><input name="input1" id="input1" type="text" /><div id="spacer"></div>');

                }
                if (ui.item.is('.header')){
                    $(ui.item).html('<div id="element2" class="element header"><h1>Contact Information</h1></div>');
                }
            }
        },
        cursor: 'move',
        revert: true
    });

    var newFormHeight = $("#left-form-space").height() + "px";
    height=newFormHeight;
    $item.addClass('noChange');
});


};

感谢您的帮助。

Answer 1

尝试使用 hover 方法而不是 mouseover 或 mouseout 方法，因为 hover 不会像其他方法那样向下传播事件。类似的东西

$('.pane').hover(function() {
  // Mouseover code here
}, function() {
  // Mouseout code here
}

Answer 2

我没有查看您的所有代码，但我注意到当您添加新的 [panes] 时，您还会附加事件。

如果您使用 live 关键字可能会更好，因为这将确保所有具有给定 id / class 等的元素在您添加元素时自动附加事件。

所以如果你添加这样的代码；

$('.MyPanels').live("mouseover", function() { //do stuff });

那么每次你添加一个包含“MyPanels”类名的元素时，鼠标悬停事件就会附加到它上面。

我发现这可以避免很多混乱，因为您永远不能向一个元素添加两个鼠标事件，而且我也不再需要专门为它编写代码。

不确定这是否能解决您的问题，但它肯定会整理并可能解决或暴露问题所在。