Question

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

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

我的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();

我添加嵌套可排序列表的功能：

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

感谢您的帮助。

Answer 1

我没有查看你的所有代码，但我注意到当你添加新的[窗格]时，你也会附加事件。

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

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

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

然后，每次添加包含类名“MyPanels”的元素时，鼠标悬停事件都会附加到它上面。

我发现这样可以省去很多困惑，因为你永远不能为一个元素添加两个鼠标事件，我也不再需要为它专门编写代码。

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

Answer 2

尝试使用悬停方法而不是鼠标悬停或鼠标悬停方法，因为悬停不像其他人那样传播事件。像

这样的东西

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

Jquery mouseover / mouseout触发不一致

2 个答案: