MouseOver / MouseOut EventListener наследует дочерние узлы?

Редактировать: Решение

Спасибо Габи за помощь в поиске решения! Не совсем так, как я хотел, нашел лучшее решение, измененное на основе ответов. Что я делаю, так это выполняю функции mouseover / mouseout только тогда, когда два элемента (цель и связанная цель) не имеют общего родителя .

Просто немного изменил пример Габи, и все работает отлично. Пока ваше всплывающее окно находится в том же элементе div, что и все, что его порождает (даже если оно находится за пределами основного содержимого, вы можете добавить его с видимым переполнением), и вы не переходите между необщими элементами на пути к нему, оно останусь живым.

divContents.addEventListener('mouseover', mouseEnter(showPopup, divContents));
divContents.addEventListener('mouseout', mouseEnter(hidePopup, divContents));

Теперь модифицированный mouseEnter ...

function mouseEnter(_fn, _parent) {
    return function(_evt) {
        if(!shareParent(_evt.target, _evt.relatedTarget, _parent)) {
            _fn.call(this, _evt);  
        }
    }
};

function shareParent(_object1, _object2, _parent) {
    if (_object1 === _object2) { 
        return true;
    }
    while (_object1 && _object1 !== _parent) {
        _object1 = _object1.parentNode;
    }
    while (_object2 && _object2 !== _parent) {
        _object2 = _object2.parentNode;
    }

    return _object1 === _object2;
}

Решил мою проблему A-OK, потому что то, что я хочу активировать для событий mouseover и mouseout, будет происходить только тогда, когда у элементов нет общего родителя - именно так я и планировал отображение всплывающих окон в любом случае.

Еще раз спасибо за пример кода от Габи!

ПРИМЕЧАНИЕ: В функции shareParent нет проверки на наличие ошибок, не проверял, но она всегда должна возвращать истину, когда достигает вершины дерева (при условии, что _parent на самом деле не является родительским элементом для _object1 или _object2). Поэтому убедитесь, что родительский объект, который вы ему передаете, действителен.

Исходный вопрос:

У меня сейчас проблема с JavaScript.

Я пытаюсь создать элемент div, который всплывает динамически при наведении курсора мыши. Div создается непосредственно рядом с объектом, который его порождает.

divCreator.addEventListener('mouseover', createPopup, true);
divCreator.addEventListener('mouseout', hidePopup, true);

Это создает всплывающее окно. Теперь во всплывающем окне, когда я его создаю, я запускаю это, прежде чем добавить его в документ:

divPopup.addEventListener('mouseover', createPopup, true);
divPopup.addEventListener('mouseout', hidePopup, true);

Это гарантирует, что если я наведу указатель мыши на всплывающее окно, оно сохранит его живым (потому что сработает divCreator mouseout) и когда я наведу указатель мыши всплывающего окна он исчезает.

Однако при использовании этого метода всякий раз, когда я наводю указатель мыши на дочерний элемент, он обнаруживает событие mouseout от родительского элемента (divPopup) и закрывает div.

Могу ли я сделать дочерние элементы «прозрачными» для событий, так сказать?