IE 中的 JQuery 事件 mouseenter mousemove 行为

Question

$(document).ready(function(){
  $('#outer').mouseenter(function(){
    console.log("mouse enter");
  });
  $('#outer').mousemove(function(){
    console.log("mouse move");
  });
});

<div style='width:800px;border:1px  solid red' id="outer">
 this is test
</div>

当鼠标进入 div 在 Firefox 中，chrome mouseenter 事件先于鼠标移动触发，而 IE mousemove 事件先于 mouseenter 触发。这是已知的错误吗？或者有没有其他方法可以让所有浏览器都以相同的方式运行

Answer 1

[更新答案]

有两种方法可以解决这个问题。

1) 仅将 mousemove 事件绑定(bind)到 mouseenter 事件上，以便所有后续事件都能以相同的顺序正确触发。 这涉及大量的绑定(bind)和解除绑定(bind)。

$(document).ready(function(){
    var outer_mousemove = function(){ console.log('mousemove') };

    $("#outer").hover(function(){
       console.log('mouseenter');
       // Attach the event listener only after
       // Mouse enter has fired
       $(this).mousemove( outer_mousemove );
    }, function(){
       $(this).unbind('mousemove', outer_mousemove );
    });
});

2) 存储一个变量，只有条件匹配时才执行mousemove事件。这样可以减少绑定(bind)/解除绑定(bind)(如果这是我的项目，我会这样做):

$(document).ready(function(){
    var outer_mousemove = false;

    $("#outer").hover(function(){
       console.log('mouseenter');
       outer_mousemove = true;
    }, function(){
       console.log('mouseleave');
       outer_mousemove = false;
    }).mousemove(function(){
       if( outer_mousemove ){
         console.log('mousemove');
       }
    });
});

[原始答案]

mouseenter 是 jQuery 创建的特殊事件，这就是它可能在 mousemove 之后触发的原因。您可能想要的是鼠标悬停:

$(document).ready(function(){
  $('#outer').mouseover(function(){
    console.log("mouse over");
  }).mousemove(function(){
    console.log("mouse move");
  });
});

此外，为了避免从子元素接收多个鼠标悬停事件，您可以进行测试以确保仅对对象生成的事件进行操作:

$(document).ready(function(){
  $('#outer').mouseover(function(e){
    if(e.target == this){
      console.log("mouse over");
    }
  }).mousemove(function(){
    console.log("mouse move");
  });
});

最后，在我的回答中，我使用了链接(即“mouseover().mousemove()”)，而不是调用选择器 $("#outer") 两次。这只会让你的页面更快一点:)