Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2010, 19:33
Интересующийся
Отправить личное сообщение для qwerty Посмотреть профиль Найти все сообщения от qwerty
 
Регистрация: 28.10.2009
Сообщений: 11

Проверка актуальности события
Имеется страница со ссылками.
При mouseover() ajax'ом (средствами jQuery) подгружается и выводится громоздкий тултип (всплывающая подсказка).
При mouseout() - исчезает.

На практике получается, что если пользователь к моменту окончания загрузки тултипа уже увел курсор со ссылки, тултип висит и mouseout() не срабатывает.

Подскажите пожалуйста, как на момент окончания работы ajax'a проверить, актуально ли еще событие mouseover() ? Ну или, на худой конец, прервать загрузку при срабатывании mouseout(). Желательно в кодах jQuery. Или тут средствами jQuery не обойтись и придется в чистом JS обработку XMLHttpRequest расписывать ?
Ответить с цитированием
  #2 (permalink)  
Старый 27.02.2010, 09:09
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,577

Может не стоит на события мыши завязывать ajax? А передать все подсказки например как данные в js.

Но если все таки надо, то просто надо засекать событие mouseout и mouseover на элементе и соответственно реагировать. Что то типа:

$('a').mouseout(function(){
    $(this).data('whereMouse', 'out');
}).mouseover(function(){
    $(this).data('whereMouse', 'over');
});

//И там где должна сформироваться подсказка:
if ($(this).data('whereMouse') == 'over') {
    // выводим подсказку
}
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2010, 22:53
Интересующийся
Отправить личное сообщение для qwerty Посмотреть профиль Найти все сообщения от qwerty
 
Регистрация: 28.10.2009
Сообщений: 11

Хм, вариант с data() как-то даже не рассматривался.

Огромное спасибо.
Работает !
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2011, 20:00
Интересующийся
Отправить личное сообщение для nextdrift Посмотреть профиль Найти все сообщения от nextdrift
 
Регистрация: 23.10.2011
Сообщений: 25

Вроде то, что мне нужно... Подскажите, как лучше организовать одну вещь...
При наведении курсора мыши, подгружается информация. Но это жутко раздражает, потому что она постоянно мешается...
Как сделать так, чтобы $.ajax выполнялся через некоторое время.
Значит вот код
$('img[uid]').live('mouseover',function () {
        uid = $(this).attr('uid');
        $.ajax({
            
            тут код аякса
 
        });
});


так так... Чуть поэкспериментировал и вроде заработало. Сделал правда чуть иначе.
Вот вид моего кода (может его можно улучшить?)

$('img[uid]').live('mouseover',function () {
        uid = $(this).attr('uid');
        whereMouse = 'over';
        $('img[uid="' + uid + '"]').live('mouseout', function(){ // с $(this) не пашет
            whereMouse = 'out';
        });

        setTimeout(function(){
            if(whereMouse == 'over') {
                $.ajax({
                            код

                });
            }
        }, 400);
});


live использую, т.к. информация постоянно подгружается

Последний раз редактировалось nextdrift, 23.10.2011 в 20:03.
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2011, 22:08
Интересующийся
Отправить личное сообщение для nextdrift Посмотреть профиль Найти все сообщения от nextdrift
 
Регистрация: 23.10.2011
Сообщений: 25

короче потестировал я свой код... Есть небольшой баг, который хотелось бы исправить. Весь вечер голову уже ломаю.........

Из-за того, что стоит таймаут, несколько событий могут запуститься одновременно. Стоит мышкой быстро провести по всем элементам и остановиться на последнем, так создается эффект мерцания на последнем. Вот чуть более полный код

$('img[uid]').live('mouseover',function () {
              
        uid = $(this).attr('uid');
        whereMouse = 'over';
        $('img[uid="' + uid + '"]').live('mouseout', function(){
            whereMouse = 'out';
        });

        setTimeout(function(){


            $('#infobar').remove(); // удаляем, если есть. На всякий пожарный

            if(whereMouse == 'over') {

                $.ajax({

                    url: local + 'ajax/json/info_u' + uid + '.json',
                    dataType: 'json',
                    success: function(json) {

                            ------------------
                            заполняем переменную infobar
                            ------------------
                            $('#track_controls').append(infobar);
                            $("#infobar").fadeIn(300);
                            
                            $('img[uid=' + uid + ']').live('mouseout',function(){
                                $("#infobar").fadeOut(300, function(){
                                    $(this).remove();
                                });
                            });
                    }
                });
            }
        }, 400);
});



подскажите, что можно сделать?
Ответить с цитированием
  #6 (permalink)  
Старый 24.10.2011, 01:44
Интересующийся
Отправить личное сообщение для nextdrift Посмотреть профиль Найти все сообщения от nextdrift
 
Регистрация: 23.10.2011
Сообщений: 25

Всё. Нашёл решение ^_^ Просто очищаю таймер. Вот код

var timer;

$('img[uid]').live('mouseover',function () {
        uid = $(this).attr('uid');
        whereMouse = 'over';
        $('img[uid="' + uid + '"]').live('mouseout', function(){
            whereMouse = 'out';
        });
        if(timer) { // чистим таймер ------ это и есть решение
            clearTimeout(timer); 
            timer = null 
        }
        timer = setTimeout(function(){

            $('#infobar').remove(); // удаляем, если есть. На всякий пожарный

            if(whereMouse == 'over') {

                $.ajax({

                    url: local + 'ajax/json/info_u' + uid + '.json',
                    dataType: 'json',
                    success: function(json) {
                            
                            infobar = 'ЗАПОЛНЯЕМ';

                            //alert(infobar);
                            $('#track_controls').append(infobar);
                            $("#infobar").fadeIn(300);
                            
                            $('img[uid=' + uid + ']').live('mouseout',function(){
                                $("#infobar").fadeOut(300, function(){
                                    $(this).remove();
                                });
                            });
                    }
                });
                
            }
        }, 400);
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна проверка поддержки события "DOMMouseScroll" Denisko-Redisko Events/DOM/Window 32 03.01.2012 00:55
Проверка актуальности URL удаленного файла с помощью JavaScript - реально? LAPSuha Оффтопик 1 25.08.2009 09:31
События Jquery и не только Tohin Events/DOM/Window 3 21.08.2009 14:57
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47
Явный вызов процедуры обработки события. supchik Общие вопросы Javascript 18 27.01.2009 13:16