不穩定鼠標懸停行爲

該容器中的一切容器
一個baseDiv

//let's create a base layer 
var container = document.getElementById('container') 
var baseDiv = document.createElement('div') 
baseDiv.id = 'baseDiv' 
baseDiv.innerText = 'this is the base div' 
baseDiv.addEventListener('mouseover', createLayer) 
container.appendChild(baseDiv)

當用戶鼠標懸停在：

layerOnTop的大小相同，放在baseDiv的頂部。

當用戶鼠標移出：

的layerOnTop被去除。

function createLayer(){ 
    console.log('creating layer') 
    layerOnTop = document.createElement('div') 
    layerOnTop.id = 'layerOnTop' 
    layerOnTop.addEventListener('mouseout', 
        function(){ 
         console.log('removing layer') 
         return layerOnTop.parentElement.removeChild(layerOnTop) 
          }) 
    container.appendChild(layerOnTop) }

簡單和偉大工程。

但是，當layerOnTop也包含元素（按鈕，輸入）時，行爲變得非常不穩定，並且在技術上退出layerOnTop時開始輕彈。

//it contains two textareas 
layerOnTop.appendChild(document.createElement('textarea')) 
layerOnTop.appendChild(document.createElement('textarea'))

我希望我能使用的mouseenter，但它似乎並沒有被瀏覽器的支持。

這裏是我的jsfiddle：http://jsfiddle.net/DjRBP/

我怎樣才能停止？我希望我可以將textareas和layerOnTop合併成一個大型鼠標懸停處理集團。

來源

2013-05-21 LittleBobbyTables

'我希望我可以使用鼠標輸入法，但它似乎不支持鉻。「 - 你爲什麼這麼說？ **編輯**：沒關係，似乎jQuery正常化鼠標事件（我習慣了），以便它們在瀏覽器中保持一致和兼容。但實際的'mouseenter'事件並不像我想的那樣受到支持 – Ian

你需要檢查你的鼠標移出事件，它實際上是離開元素。改變你的鼠標功能爲：

function(event) { 
    var e = event.toElement || event.relatedTarget; 
    if (e.parentNode == this || e == this) { 
     // We're not actually leaving the parent node so don't remove layer 
     return; 
    } 

    console.log('removing layer') 
    return layerOnTop.parentElement.removeChild(layerOnTop) 
})

來源

2013-05-21 15:27:24 chrislondon

不穩定鼠標懸停行爲

回答

相關問題