У меня есть код в Angularjs, После загрузки iframe я показываю всплывающее окно при наведении на элемент, который имеет определенный класс. Смотрите ниже прикрепленное изображение.
Теперь я хочу закрыть это всплывающее окно в следующих двух случаях:
- Когда кто-то оставляет курсор из всплывающего окна наружу.
- Когда кто-то покидает курсор из подчеркнутого текста, с которым я связал событие hover.
Итак, я связал событие отпускания мыши на обеих вещах.
При отпускании мыши, я жду 1 секунду, так что если в течение 1 секунды, если курсор вернется к всплывающему окну, я отменю запланированную функцию closeEditAnnotationModal
. (Чтобы отменить все таймауты, я поддерживаю массив его обещаний)
Это поведение работает нормально, если я ухожу из всплывающего окна или возвращаюсь во всплывающее окно. Но это не работает для подчеркнутого текста.
Ниже приведен пример кода для справки.
var hoveredElementAnnId, onPopupHoverEvent, onAnnTextHoverEvent, allTheScheduledEvents=[];
function cancelAllTheScheduledEvents() {
if (allTheScheduledEvents.length !== 0) {
allTheScheduledEvents.forEach(function(timeout) {
$timeout.cancel(timeout);
});
allTheScheduledEvents = [];
}
}
$('iframe').load(function () {
loadedIframe = $(this);
$(this).contents().find('.ann').hover(function() {
// For every mouse in, there is mouse out event which is responsible to close the popup
// But if we hover from 1 popup to another popup (Immediate switching between annoatation) than
// we need to cancel/clear all the remaining timeouts which are closing the popup,
// So we need to maintain the array of all the timeouts
cancelAllTheScheduledEvents();
var hoveredElement = $(this);
hoveredElement.after(popoverTemplate); // This popoverTemplate is html template with div has id = #editAnnotationPopover
loadedIframe.contents().find('#editAnnotationPopover').on('mouseleave', function() {
onPopupHoverEvent = $timeout (function () {
closeEditAnnotationModal();
}, 1000);
allTheScheduledEvents.push(onPopupHoverEvent);
});
loadedIframe.contents().find('#editAnnotationPopover').on('mouseover', function() {
cancelAllTheScheduledEvents();
});
}, function() {
onTextHoverEvent = $timeout(function () {
closeEditAnnotationModal();
}, 1000);
allTheScheduledEvents.push(onAnnTextHoverEvent);
});
});
Обновление: На странице refre sh мой приведенный выше код работает нормально, но если я выполняю какие-либо действия с iframe и перезагружаю iframe с использованием кода (var iframe = document.getElementById('vieweriframe'); iframe.src = iframe.src;
), он перестает работать