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

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

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

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

Ответы

Ответ 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");
});

Ответ 2

ознакомьтесь с 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>, чтобы получить подробную информацию об этом.

Ответ 4

Логика выглядит следующим образом:

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