Question

所以让我们说：

一切容器
该容器内的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但Chrome似乎不支持它。

这是我的jsfiddle：http://jsfiddle.net/DjRBP/

我怎么能阻止这个？我希望我可以将textareas和layerOnTop合并为一个大型鼠标悬停处理集团。

Answer 1

您需要检查鼠标移出事件，确实它已经离开元素。将mouseout功能更改为：

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)
})

鼠标悬停层内嵌套项目的鼠标悬停行为不稳定

1 个答案: