javascript - предотвращение onmouseout при наведении мыши на дочерний элемент, где дочерний элемент создается динамически.

Question

Я прочитал несколько публикаций на подобные темы, и все они были превосходными, и я многому научился, читая их, однако я все еще не могу заставить свой код работать удовлетворительно.

У меня есть строка меню с несколькими кнопками. При наведении указателя мыши на 3 из них некоторые JavaScript динамически создают раскрывающееся меню для каждой из кнопок.

Когда я полностью выхожу из кнопок или из строки меню, я очищаю выпадающие списки.

Очевидно, что при наведении мыши на раскрывающийся список я не хочу, чтобы этот раскрывающийся список очищался.

Но, конечно, события onmouseout запускаются и очищают это меню.

Я вижу различные подходы, применяемые к подобным проблемам. Но ничего из этого не работает, и я думаю, что это происходит из-за того, что div и dl созданы там, где их явно нет, когда слушатель был назначен родителю. Таким образом, хотя html, добавленный в dom, помещает выпадающий список в область действия слушателя, он все равно предполагает, что произошло событие mouseout.

Я попытался исправить, добавив прослушиватели динамического контента, которые были успешно добавлены, но я по-прежнему не могу предотвратить срабатывание указателя мыши перед указателем мыши.

Answer 1

Установить таймер и очистить его при наведении мыши на сгенерированные меню.

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

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