将活性元素在Internet Explorer

在图书馆失去mouseOut事件我使用我当悬停在一个元素移动到DOM前面的任务。（我把它做得更大，所以我需要看到它，然后在退出时将它缩小）。将活性元素在Internet Explorer

我使用的库具有其使用有源元件上appendChildren它，因此进一步移动到结束其父朝向DOM的端部，进而在上面纯溶液。

问题是，我相信，因为要移动的元素是你徘徊在mouseout事件的一个丢失。鼠标仍在节点上，但mouseout事件未被触发。

我已将功能剥离以确认问题。它在Firefox中工作正常，但在任何版本的IE中都不行。我在这里使用jquery来提高速度。解决方案可以在普通的旧javascript ...这将是一种偏好，因为它可能需要回流。

我不能在这里使用z-index作为元素是vml，库是Raphael，而且我正在使用toFront调用。通过UL /李样本显示问题一个简单的例子

<!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

**编辑2：**查看所有答案全部评论张贴在该地段的详细信息之前。

来源

2010-09-10 johnwards

我无法理解你的帖子。你想在鼠标悬停在元素上时触发'mouseout'事件？你真正的问题是什么？ – lincolnk 2010-09-10 16:01:40

对于this.parentNode.appendChild（this）;你试图重新添加现有的LI元素？为什么不只是添加一个CSS类而不是用新的CSS添加/删除相同的元素？或者，您的原始代码是否需要从UL中的其他位置添加一个全新的元素来模拟您在开始时提到的“扩展”尺寸效果？ – Gary 2010-09-10 16:08:15

Linkol我试图让示例代码在ie中工作，就像它在Firefox中一样。 mouseout事件不会触发。我以li元素为例。正如我在文章中所说的，元素实际上是VML元素。因此，像z-index或增加类的东西将无法工作，除非人们可以证明不同。 – johnwards 2010-09-10 16:37:57

的问题是，IE处理mouseover的方式与的处理方式不同，因为它的行为与组合在一个元素上的mouseenter和mousemove相同。在其他浏览器中，它只是mouseenter。

所以即使你的鼠标已经进入目标元素，并且你已经改变了它的外观并重新安装到它的父级mouseover仍然会触发鼠标的每一次移动，元素会重新获得重新使用，从而阻止其他事件处理程序被称为。

解决方案是模拟正确的mouseover行为，以便onmouseover中的操作仅执行一次。

$("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展示浏览器之间的差异mouseover（奖金：本地JavaScript）

来源

2010-10-23 22:14:44 galambalazs

辉煌，正是我在设置赏金时所期待的。我的代码现在表现得好多了，现在我也不需要破解它。 – johnwards 2010-10-25 07:43:41

我很好，我可以帮助:) – galambalazs 2010-10-25 08:18:27

下面是Raphael 2.0.2中的一个简单示例http://jsfiddle.net/K2bSY/2/，用于使用toFront（）遇到相同问题的人，显示使用Raphael的示例修复。 data（）函数 – user568458 2012-03-12 10:50:53

那是靠不住的，似乎是IE-只（但这样是VML）。如果父元素具有指定的高度，则可以将mouseout处理程序附加到父项......但听起来这样在您的情况下不起作用。您的最佳选择是使用鼠标悬停在相邻元素上以隐藏它：

$(function() 
{ 
    $("li").mouseover(function() 
    { 
     $("li").css("border-color", "black"); 
     $(this).css("border-color", "red"); 
     this.parentNode.appendChild(this); 
    }); 
});

或SVG。您可以在SVG中使用z-index。

来源

2010-09-11 00:53:14 gilly3

嗯，替代方案是我认为这里的解决方案。基本上我需要在mouseover上的所有其他元素上调用一个复位函数，这将触发缩小动画。它非常笨重，但它可能工作。我现在就为这个答案投票，看看其他人是否可以想到某件事。 – johnwards 2010-09-11 10:57:01

我能得到它与嵌套的div和家长一个MouseEnter事件工作：

<div id="frame"> 
    <div class='box'></div> 
    <div class='box'></div> 
    <div class='box'></div> 
    <div class='box'></div> 
</div> 
... 
$('#frame').mouseenter(function() { 
    $(".box").css("border-color", "black"); 
});

下面是使用拉斐尔一个工作版本：

http://jsfiddle.net/xDREx/

来源

2010-10-20 19:06:12 webXL

可以'一直工作。当我将鼠标移到框上时什么也没有发生。 – johnwards 2010-10-21 07:33:01

你试过链接了吗？你使用的是什么浏览器？我得到它在IE6，IE7和IE8的工作。 – webXL 2010-10-21 17:18:13

哦，对父母来说，这基本上就是你在做什么。其中引发了重置。尼斯。但是它并没有解决事件丢失的核心问题。（点击活动也是！）Deffo虽然值得一半200分。如果我能够在失败事件中获得成功，我会成为一个快乐的人。（JSFiddle一定是失败了，现在工作很好） – johnwards 2010-10-22 19:05:47

我修改@galambalazs'的答案，因为我发现它如果我真的很快在李元素上徘徊，那就失败了的元素仍然会保留mouseover的效果。

我想出了一个解决方案，通过将这些元素推送到堆栈时触发mouseover事件，从而消除无法触发mouseover事件的元素上的悬停状态。每当任一mouseover或mouseout事件被调用，我弹出从这个数组中的元素，并删除置于其上的样式：

$(function(){ 

    // Track any hovered elements 
    window.hovered = []; 

    $("li").mouseover(function() { 
     // make sure that these actions happen only once 
     if ($(this).css("border-color") != "red") { 
      resetHovered(); // Reset any previous hovered elements 
      $(this).css("border-color","red"); 
      this.parentNode.appendChild(this); 
      hovered.push(this); 
     } 
    }); 

    $("li").mouseout(function(){ 
     resetHovered(); // Reset any previous hovered elements 
    }); 

    // Reset any elements on the stack 
    function resetHovered() { 
     while (hovered.length > 0) { 
      var elem = hovered.pop(); 
      $(elem).css("border-color","black"); 
     } 
    } 
});

我测试与IE 11.一种功能性示例中，该溶液可以发现here。

来源

2014-05-23 21:28:22

将活性元素在Internet Explorer

回答

相关问题