IE中的JQuery事件mouseenter mousemove行为

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

 
 this is test  

当鼠标进入div时在firefox中，Chrome鼠标移动事件在鼠标移动时首先被触发，而IE鼠标移动事件首先被激活。 这知道错误吗？ 或者是否有其他方式使所有浏览器都能以相同的方式运行

Answer 1

[更新的答案]

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

1）仅在mousenter事件上绑定mousemove事件，以便所有后续事件以相同的顺序正确触发。 这涉及很多绑定和解除绑定。

 $(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事件。 这种方式更少绑定/解除绑定（如果它是我的项目，这就是我会这样做的方式）：

 $(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之后触发。 你可能想要的是mouseover ：

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

此外，为了防止从子元素接收多个鼠标hover事件，您可以进行测试以确保您仅对您的对象生成的事件进行操作：

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

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