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鼠标移动事件在鼠标移动时首先被触发，而IE鼠标移动事件首先被激活。这知道错误吗？或者是否有其他方式使所有浏览器都能以相同的方式运行

Answer 1

[更新后的答案]

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

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

$(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")。这只会使你的页面更快一些：）

IE中的JQuery事件mouseenter mousemove行为

1 个答案: