Задержка события наведения jquery?

Я хотел бы отложить событие наведения в jquery. Я читаю из файла, когда пользователь наводит указатель мыши на ссылку или метку. Я не хочу, чтобы это событие произошло немедленно, если пользователь просто перемещает мышь по экрану. Есть ли способ отсрочить событие от стрельбы?

спасибо.

пример кода:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

обновление:(1/14/09) После добавления плагина HoverIntent приведенный выше код был изменен на следующий реализовать его. Очень просто реализовать.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}
6 93
jquery events mouseevent settimeout

6 ответов:

используйте плагин hoverIntent для jquery:http://cherne.net/brian/resources/jquery.hoverIntent.html

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

есть один gotcha к этому подходу, некоторые интерфейсы лишены состояния "наведения", например. мобильные браузеры, такие как safari на iphone. Вы можете скрывать важную часть интерфейса или навигации с помощью нет способа открыть его на таком устройстве. Вы можете обойти это с помощью CSS для конкретного устройства.

91

вам нужно проверить таймер при наведении. Если он не существует (т. е. это первое наведение), создайте его. Если он существует (т. е. это не первый Ховер), убить его и перезапустить его. Установите полезную нагрузку таймера в свой код.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Я уверен, что jQuery имеет функцию, которая обертывает все это для вас.

редактировать - Ах да, плагин jQuery для спасения

49

полностью согласен с тем, что hoverIntent является лучшим решением, но если вы несчастный sod, который работает на веб-сайте с долгим и затяжным процессом утверждения плагинов jQuery, вот быстрое и грязное решение, которое хорошо сработало для меня:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

Это просто для расширения

  • , если мышь была на нем дольше 300 мс.
    • 11

    вы можете использовать вызов setTimeout() с clearTimeout () на событие mouseout.

    6

    в 2016 году решение Crescent Fresh не сработало, как ожидалось для меня, поэтому я придумал это:

    $(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});
    1

    мое решение легко. Задержка открытия меню, если пользователь держит mouseenter на obj более 300 мс:

    var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});
    -2