0

所以假设我们有：

  • 一个容纳一切的容器
  • 该容器内的 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 合并为一个大型的鼠标悬停处理集团。

4

1 回答 1

2

您需要检查鼠标移出事件，它实际上正在离开元素。将鼠标移出功能更改为：

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-21T15:27:24.733 回答