不稳定鼠标悬停行为

该容器中的一切容器
一个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

不稳定鼠标悬停行为

回答

相关问题