正如标题所说,我正在处理的一个页面在页面加载时触发了一个悬停事件。
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。
更奇怪的是,在加载页面的缓存版本时,错误就消失了。这似乎只发生在完全新加载的页面上。有没有可能这是某种类型的竞争条件,即使它被包装在适当的事件侦听器中?谢谢!
发布于 2018-06-08 04:07:33
我不会说我找到了一个完全支持的answer本身,但我确实找到了我问题的原因,不幸的是,它不一定包含在我的问题陈述中。
这个元素位于我的视区中的0,0处。这是一个很大的固定徽标,适合于表格形式的布局。看起来,在加载站点的某些实例中,诸如隐名或无缓存视图(后者有点不一致),鼠标移动之前的初始光标位置总是设置为0,0,直到鼠标移动为止。
这提出了一些问题,即重复查看页面时光标所在位置的一致性,以及是否可以通过编程设置光标。目前有几种方法可以解决这个问题。
https://stackoverflow.com/questions/50746308
复制相似问题