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

Question

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

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

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

Answer 1

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

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

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");
});

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

Логика следующая:

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