香草JS悬停事件发生在页面加载

Question

就像标题所说，我正在处理的页面是在页面加载时触发悬停事件。

的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。

更奇怪的是，在加载页面的缓存版本时，错误消失了。这似乎只发生在页面的全新负载上。这是某种竞争条件的任何可能性，即使它包含在适当的事件监听器中？谢谢！

Answer 1

我不会说我发现了一个完全支持的答案本身，但我确实找到了我的问题的原因，遗憾的是，这个问题不一定包含在我的问题陈述。

这个元素位于我视口的0,0处。这是一个大型固定徽标，适合桌面布局。看起来，在加载网站的某些情况下，例如隐身或无缓存视图（后者有些不一致），鼠标移动前的初始光标位置始终设置为0,0直到鼠标移动。

这引发了一些关于光标在重复页面视图中的位置的一致性以及是否可以以编程方式设置光标的问题。现在有几种方法。