Javascript in chrome

Question

我有一個div，其中onmouseover，顯示面板和onmouseout使它消失。 Javascript代碼如下：

function ShowPanel() { 
    document.getElementById("thePanel").style.display = "inline"; 
} 

function HidePanel() { 
    document.getElementById("thePanel").style.display = "none"; 
} 

該代碼完全適用於firefox和IE。問題是鉻。它一直運行，直到鼠標位於面板的文本框中。當鼠標移動到文本框上時，即使文本框是面板的一部分，並且應該保持打開狀態，也會調用onmouseout事件。

Answer 1

你需要的是onmouseenter事件的行爲，而不是onmouseover和onmouseleave，而不是onmouseout。問題是這些事件只在IE中工作（他們實際上正確地獲得了這些）。您需要模擬這種行爲，同時考慮到不同瀏覽器中事件處理的所有差異，或者只是使用一個好的JavaScript庫來爲您處理這些問題。例如，jQuery有.mouseenter()和.mouseleave()，它們在瀏覽器上模擬不支持這些事件本身，甚至是一個很好的快捷方式.hover()來同時設置。

我不建議手動去做，除非你真的知道所有在不同瀏覽器中的事件模型的怪癖和不一致（並且你沒有問你這個問題），但如果你想看看jQuery是如何做的然後它會看到events.js並搜索mouseenter和mouseleave。

Answer 2

在Chrome中，如果您發現mouseout事件是從父元素（處理程序註冊的位置）和包含在其中的子元素移開時觸發的。

簡單的解決方法是使用jQuery，它將在不支持它的瀏覽器上模擬mouseleave事件（它不會遇到這個問題）。

或者，在您的mouseout處理程序中，查看事件的toElement屬性，並遍歷其父列表並查看您的原始父項是否在該列表中。如果它不在列表中，請僅處理您的操作。

document.getElementById('outer').addEventListener('mouseout', function(ev) { 
    var el = ev.toElement; 
    while (el && el !== document.body) { 
     if (el === this) { 
      console.log('mouseout ignored'); 
      return; // enclosed - don't do anything 
     } 
     el = el.parentNode; 
    } 
    console.log('mouseout'); 
}, false); 

演示在http://jsfiddle.net/raybellis/s4EQT/