JQuery事件mouseenter mousemove在IE中的行为 [英] JQuery events mouseenter mousemove behaviour in IE

问题描述

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

when mouse entered the div In firefox,chrome mouseenter event is getting fired first than mouse move in case of IE mousemove event getting fired first than mouseenter. Is this know bug ? or is there any other way so that all browsers can behave in same way

推荐答案

[更新答案]

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

There are two ways to get around this.

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事件。这种方式的约束/解除约束（这是我如何做，如果它是我的项目）：

2) Store a variable, and only execute mousemove events when the conditions match. Much less binding/unbinding this way (This is how I would do it if it were my project):

$(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 ：

mouseenter is a special event created by jQuery which is why it might fire after mousemove. What you probably want is mouseover:

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

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

Additionally, to keep from receiving multiple mouseover events from child elements, you could test to make sure you are only acting on events generated by your object:

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

最后，在我的答案中，我使用链接（即'mouseover（）。mousemove（）'）调用选择器 $（＃outer）两次。这只会让您的网页更快一些：）

Finally, in my answer I used chaining (i.e. 'mouseover().mousemove()') instead of calling the selector $("#outer") twice. This just makes your page a little faster :)

这篇关于JQuery事件mouseenter mousemove在IE中的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！