將活性元素在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

回答

相關問題