移动活动元素在Internet Explorer中丢失mouseout事件 [英] Move active element loses mouseout event in internet explorer
问题描述
在我使用的库中，我的任务是将元素移动到dom的前面。 （我把它做得更大所以我需要看到它，然后在鼠标移出时缩回它。）
In a library I am using I have the task of moving an element to the front of the dom when it is hovered over. (I make it bigger so I need to see it, then shrink it back when mouse out).
我正在使用的库有一个简洁的解决方案，它在活动时使用了appendChildren元素将它移动到它的父元素的末端，从而进一步朝向dom的末尾，然后转向顶部。
The library I am using has neat solution which uses appendChildren on the active element to move it to the end its parent so further towards the end of the dom and in turn on top.
问题是我相信因为你要移动的元素是你在鼠标悬停事件上移动的那个是丢失的。您的鼠标仍然在节点上，但是没有触发mouseout事件。
The problem is I believe that because the element you are moving is the one you are hovering over the mouseout event is lost. Your mouse is still over the node but the mouseout event isn't being fired.
我已经删除了功能以确认问题。它在Firefox中运行良好，但在任何版本的IE中都没有。我在这里使用jquery来提高速度。解决方案可以是普通的旧javascript ..这可能是一个偏好，因为它可能需要重新上传。
I have stripped the functionality down to confirm the issue. It works fine in firefox but not in any version of IE. I'm using jquery here for speed. Solutions can be in plain old javascript..which would be a preference as it might need to go back up stream.
我不能使用z-index这里的元素是vml，库是Raphael，我正在使用toFront调用。使用ul / li示例以简单示例显示问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
li
{
border:1px solid black;
}
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
$("li").mouseover(function(){
$(this).css("border-color","red");
this.parentNode.appendChild(this);
});
$("li").mouseout(function(){
$(this).css("border-color","black");
});
});
</script>
</body>
</html>
编辑：这是js粘贴垃圾箱的链接，可以看到它在行动。 http://jsbin.com/obesa4
Here is a link to a js paste bin to see it in action. http://jsbin.com/obesa4
* *编辑2：**在发布更多信息之前，查看所有答案的所有评论。
**Edit 2: ** See all comments on all answers before posting as lots more info in that.
推荐答案
问题在于 IE处理鼠标悬停以不同方式，因为它的行为类似于 mouseenter 和 mousemove 组合在一个元素上。在其他浏览器中它只是 mouseenter 。
The problem is that IE handles mouseover differently, because it behaves like mouseenter and mousemove combined on an element. In other browsers it's just mouseenter.
所以即使你的鼠标进入了目标元素并且你已经改变了它看起来并重新连接到它的父鼠标悬停仍将为鼠标的每次移动触发，该元素再次重新悬浮，这会阻止其他事件处理程序被调用。
So even after your mouse has entered the target element and you've changed it's look and reappended it to it's parent mouseover will still fire for every movement of the mouse, the element gets reappended again, which prevents other event handlers from being called.
解决方案是模拟正确的鼠标悬停 行为，以便
The solution is to emulate the correct mouseover behavior so that actions in onmouseover are executed only once.
$("li").mouseover( function() {
// make sure these actions are executed only once
if ( this.style.borderColor != "red" ) {
this.style.borderColor = "red";
this.parentNode.appendChild(this);
}
});
示例
- Extented demo of yours
- Example demonstrating the
mouseoverdifference between browsers (bonus: native javascript)
这篇关于移动活动元素在Internet Explorer中丢失mouseout事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
