Vanilla JS Hover事件在页面加载时触发
Vanilla JS Hover事件在页面加载时触发
提问于 2018-06-08 00:39:38
正如标题所说，我正在处理的一个页面在页面加载时触发了一个悬停事件。
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
Stack Overflow用户
发布于 2018-06-08 04:07:33
我不会说我找到了一个完全支持的answer本身，但我确实找到了我问题的原因，不幸的是，它不一定包含在我的问题陈述中。
这个元素位于我的视区中的0,0处。这是一个很大的固定徽标，适合于表格形式的布局。看起来，在加载站点的某些实例中，诸如隐名或无缓存视图(后者有点不一致)，鼠标移动之前的初始光标位置总是设置为0,0，直到鼠标移动为止。
这提出了一些问题，即重复查看页面时光标所在位置的一致性，以及是否可以通过编程设置光标。目前有几种方法可以解决这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50746308
复制相关文章
相似问题
腾讯云开发者
