onmouseout не срабатывает, когда элемент исчезает

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

Вот упрощенный пример, в котором вместо всплывающих подсказок используются фоновые изменения (чтобы вы могли легко запустить его):

  

   Remove me
  

Проблема заключается в следующем: когда я нажимаю «Удалить меня», моя мышь больше не находится «над» элементом div. , но onmouseout не срабатывает, потому что он исчез. Я хотел бы, чтобы этот пример вернулся к белому фону, когда я нажимаю «Удалить меня».

Есть очевидное решение, которого я хотел бы избежать. Я не хочу, чтобы обработчик onclick, который удаляет элемент, вручную "исправлял" документ. Это связано с тем, что может быть произвольно много обработчиков, которые могут удалить div с помощью onmouseout. В общем, все обработчики mouseout и remove могут генерироваться динамически и должны знать друг о друге. Чтобы еще больше усложнить ситуацию, у меня может быть случай, когда съемные элементы вложены друг в друга, и любой из них можно удалить. (Возможно, я смогу убрать это ограничение, но это потребует небольшой работы.)

Вот пример решения, которое могло бы работать: при наведении мыши модальный диалог регистрируется как «активный»; затем всякий раз, когда элементы удаляются, перебирать все модальные диалоги и искать те, которых больше нет в документе. Но это требует от меня хранения глобального хранилища диалогов и времени O(n*m), где n — количество активных диалогов, а m — насколько глубоко вложен диалог в DOM. Кроме того, мне нужно запускать эту операцию всякий раз, когда я удаляю элементы, даже если совершенно очевидно, что ничего не затрагивается.

Вот еще одно решение, которое может сработать: если вы можете реализовать событие onremovedfromdocument, то мы просто скопируем обработчик onmouseout как событие onremovedfromdocument, и пример тоже будет работать корректно. (Я слышал, что jQuery может поддерживать это, но мне нужно взаимодействовать с кодом, отличным от jQuery.)

Вот еще одно возможное решение: сделать так, чтобы каждый модальный диалог неоднократно опрашивал, чтобы узнать, находится ли его родитель в документе. Если это не так, пусть он совершит сэппуку. Но голосование действительно уродливое. (Думаю, я бы сделал это, если бы не было ничего лучше!)

Вот еще одна идея: использовать захват событий, чтобы позволить элементу onmouseout сначала захватывать элемент click, и настроить таймер, чтобы проверять, находится ли он все еще в активном состоянии. документ после того, как щелчок сделан.

Для справки, вот что я действительно пытаюсь сделать: у меня есть виджет JS, который строит сложную древовидную структуру. Многие изменения в виджете включают в себя нажатие какой-либо кнопки в дереве, которая затем добавляет или удаляет из дерева (возможно, удаляет себя.) Тем не менее, некоторые из узлов требуют более сложных процедур редактирования, поэтому я хотел бы вызвать всплывающую подсказку с инструкциями и, возможно, большим количеством кнопок, когда пользователь наводит на них курсор, или даже сохранить диалог, если пользователь щелкнет их. Но пользователь может передумать и решить удалить узел или любого родителя узла, и в этом случае диалог должен исчезнуть. Вы можете посмотреть реализацию того, что у меня сейчас есть здесь, где диалоги создаются вручную. Я хотел бы начать использовать хорошую библиотеку всплывающих подсказок, но все они имеют ошибку, которую я описал выше.