頁面加載時觸發Vanilla JS Hover事件

Question

就像標題說的那樣，我正在處理的頁面在頁面加載時觸發一個懸停事件。

Java腳本

// 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，直到鼠標移動為止。

這就提出了一些問題，即在重復訪問頁面時光標位於何處的一致性以及是否可以通過編程方式進行設置。 目前有兩種解決方法。