CODEWITHSUNDEEP
javascriptmouseoveraddeventlistener
LittleBobbyTables
LittleBobbyTables

Reputation: 4473

Erratic mouseover behavior with nested items inside mouseover layer

So let's say we have:

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

When the user mouses over:

When the user mouses out:

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

Simple and works great.

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

I wish I could use mouseenter but it doesn't seem to be supported by Chrome.

Here's my jsfiddle: http://jsfiddle.net/DjRBP/

How can I stop this? I wish I could merge the textareas and layerOnTop into one large mouseover-handling conglomerate.

Upvotes: 0

Views: 143

Answers (1)

chrislondon
chrislondon

Reputation: 12031

You need to check in your mouse out event that it's actually leaving the element. Change your mouseout function to:

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

Upvotes: 2

Related Questions