Mam element na stronie, po najechaniu na który pobierane są dane z serwisu restowego i wyświetlany jet tooltip z tymi danymi. Po odsunięciu kursora myszy z elementu tooltip znika. Wszystko działa w porządku na wszystkich przeglądarkach oprócz Internet Explorera. Testowałem na Chromie, Firefoxie i Operze. Poniżej mój prosty kod:
jQuery(document).ready(function() {
showAndHideTooltip();
});
showAndHideTooltip = function() {
jQuery(document).on({
mouseenter: function () {
console.log("Enter start");
jQuery(".tooltip").stop(
true, true).delay(1000).fadeIn(500);
getData();
console.log("Enter end");
},
mouseleave: function () {
console.log("Leave start");
jQuery(".tooltip").stop(
true, true).delay(1000).fadeOut(500);
console.log("Leave end");
}
}, ".element");
}
getData = function() {
jQuery.ajax({
url : 'rest/data/',
type : 'POST',
dataType : 'json',
async: false,
success : function(data) {
console.log("Success");
},
error : function(data) {
console.log("Error: Get data");
}
});
}
Kiedy loguję sobie wszystkie zdarzenia. Po najechaniu na element na przeglądarkach oprócz IE otrzymuję następujące logi:
Enter start
Success
Enter end
Leave start
Leave end
Czyli wszystko prawidłowo. W IE mam następujący efekt w logach po pojedynczym najechaniu na element
Enter start
Success
Enter end
Leave start
Leave end
Powyższe logi pojawiają się kilkukrotnie, a kończą się tak:
Enter start
Success
Enter end
Czyli zdarzenie opuszczenia kursora nie jest wykonywane w ogóle. Tooltip cały czas jest wyświetlony i nie znika, mimo tego, że kursor znajduje się w zupełnie innym miejscu.
Dlaczego w IE pojedynczym najechaniu kursorem wykonywane są zdarzenia jakby nastąpiło ich kilka? Dodam, że gdy usunę ze zdarzenia mouseenter wywołanie serwisu restowego
getData();
wszystko zachowuje się prawidłowo.
Przypuszczam, że problem tkwi w ustawieniu wywołania ajaxowego na synchroniczne:
async: false
Podobno IE tego nie obsługuje?
Zmieniłem wartość async na false ponieważ z ustawionym na true, powyższy błąd występował zarówno na IE jak i na Firefoxie... Chrome i Opera reagowały prawidłowo, nawet po takiej zmianie.
Wie ktoś jak naprawić ten problem? Jak poprawnie obsłużyć takie wywołanie serwisu restowego w zdarzeniu najechania myszy, aby było wywoływane tylko jednokrotnie?