javascript - prevent onmouseout when mouseover child where child created dynamically

Question

I have read a number of postings on similar themes all of which have been excellent and I have learnt a lot reading them however I still cannot make my code work satisfactorily.

I have a menu bar with a number of buttons. When I mouseover 3 of these some javascript dynamically creates a drop down menu for each of the buttons.

When I mouse out of the buttons or the out the menu bar completely I clear the drop downs.

Obviously when I mouse over the drop down I do not want this drop down to be cleared.

But of course the onmouseout events fire and clear this menu.

I can see the various approaches used to similar problems. But none of these work and I think that it results from the fact the the div and dl created where obviously not present when the listener was allocated to the parent. So although the html added to the dom places the drop down within the scope of the listener it still assumes a mouseout event has occurred.

I have tried to correct by adding listeners for the dynamic content which are successfully added but I still cannot prevent the mouseout from firing ahead of the mouse-over.

Ivan Castellanos Ivan Castellanos · Accepted Answer · 2012-01-13T22:56:15

Set a timer and clear it on mouseover the generated menus.

document.getElementById("menu").onmouseout = function(e){   
    window.to = setTimeout(function(){
        // remove the submenu
    },20)
}

document.getElementById("submenu").onmouseover = function(e){   
    clearInterval(window.to)
}

javascript - prevent onmouseout when mouseover child where child created dynamically

1 Answers