Как запустить событие mouseover, только если мышь зависла над элементом не менее 1 секунды?

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

Я видел этот вопрос но это для jQuery, и я использую Prototype. Я не знаю достаточно jQuery, чтобы интерпретировать, что решение.

Если бы кто-то мог объяснить логику или функциональность JavaScript, которая потребуется, чтобы вызвать отложенный запуск события mouseover, я был бы признателен.

19
javascript prototypejs

4 ответов

вы не можете отложить запуск события, но вы можете отложить обработку события.

вот быстрый пример без jQuery или прототипа, который облегчит его понимание.

var delay = function (elem, callback) {
    var timeout = null;
    elem.onmouseover = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 1000);
    };

    elem.onmouseout = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};


delay(document.getElementById('someelem'), function() {
    alert("Fired");
});
41

проверьте hoverintent http://cherne.net/brian/resources/jquery.hoverIntent.html он будет делать именно то, что вы хотите.

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

3

я вдохновлен Робертом (спасибо) и для загрузки данных из таблицы я использую это:

<tr onmouseover="funcDelay= setTimeout('loadData(5)', 1000)" onmouseout="clearTimeout(funcDelay)">

и функция для загрузки данных

function fLoadDatDetail(vZadId) {
  $("#divId").load("/controller/function/"+vZadId);
}

вы должны держать мышь 1 секунду над одной строкой <TABLE>, чтобы получить подробную информацию о нем.

3

логика такова:

когда мышь перемещается по объекту, создается таймер, который будет срабатывать через 1000 миллисекунд. Когда мышь удаляется от объекта, если таймер еще не запущен, таймер отключается и удаляется из памяти, предотвращая его запуск.

2