Как запустить событие мыши один раз для перемещения по дочерним элементам в Javascript?

При входе в элемент DOM произойдет событие mouseover. При перемещении мыши вокруг текущего элемента не происходит никакого события, так как mouseoverслужит для входа.

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

См. этотпример. Если мы наведем указатель мыши на родительский элемент (фактически на его textNode), ничего нового не произойдет, но если мы перейдем к дочернему элементу (все еще на родительском), он снова и снова вызовет событие mouseover. На самом деле он будет запускать событие мыши каждый раз, когда мышь входит в элемент (даже внутри исходного родительского элемента).

Как мы можем сделать mouseoverтолько один раз для перемещения по всему родителю (исходному элементу в addEventListener)? В данном примере я имею в виду избежать срабатывания события при перемещении мыши по дочернему элементу.