Событие Vanilla JS Hover запускается при загрузке страницы - PullRequest
0 голосов
/ 07 июня 2018

Как видно из заголовка, страница, над которой я работаю, запускает событие hover при загрузке страницы.

Javascript

// Random Color Function
var repeater;
function rnd_color(){
    document.getElementById('logo').style.fill = '#'+Math.floor(Math.random()*16777215).toString(16);
    repeater = setTimeout( function(){ rnd_color(el) }, 100);
};

// Logo Hover
var logo = document.getElementById('logo');
logo.addEventListener('mouseover', rnd_color, false);
logo.addEventListener('mouseout', function(){
    clearTimeout(repeater);
    this.style.fill = '#000';
});

Вышесказанное, конечно, помещено в оболочку DOMContentLoaded.

HTML

<svg class='menu-logo' id='logo' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 105.5"> <!-- PATHS AND FILLS HERE --> </svg>

Так что эта функция - просто забавное пасхальное яйцо - когда вы наводите курсор мыши на svg, она запускает новый цвет заливки каждую 1/10 секунды.Все остальное в нем работает просто отлично, за исключением того, что при загрузке страницы сразу начинает работать цветовая функция.Как только вы наведете указатель мыши, соответствующее событие mouseout позаботится о пополнении svg до # 000.

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

1 Ответ

0 голосов
/ 07 июня 2018

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

Этот элемент находится в позиции 0,0 в моем окне просмотра.Это большой фиксированный логотип, который вписывается в табличный макет.Может показаться, что в некоторых случаях загрузки сайта, таких как инкогнито или представление без кэша (последнее несколько несовместимо), начальная позиция курсора до перемещения мыши всегда устанавливается равной 0,0, пока мышь не переместится,

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...