IE 中的 JQuery 事件 mouseenter mousemove 行为答案

【问题标题】：JQuery events mouseenter mousemove behaviour in IEIE 中的 JQuery 事件 mouseenter mousemove 行为
【发布时间】：2010-02-17 05:23:17
【问题描述】：

$(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 先触发。这是知道错误吗？还是有任何其他方式可以让所有浏览器都以相同的方式运行

【问题讨论】：

标签： jquery events

【解决方案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");
  });
});

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

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

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

【讨论】：

很抱歉，但在您的情况下，FF mouseover 在 mousemove 之前触发，而在 IE mousemove 在 mouseover 之前触发。 jsbin.com/oxigi/7
@Rakesh Juyal，感谢您的测试。我更新了我的答案以处理测试以保证仅在初始 mouseenter 之后采取行动。