Delay onmouseover javascript
Delay onmouseover javascript
提问于 2012-12-03 03:25:07
我对大多数web开发者来说都是新手，所以我恳请你提供一些支持。我有一个图像映射，其中我在单独的div中分配了几个触发不同内容的区域。现在我想给onmouseover触发器添加一个延迟，这样div中的内容只有在用户将光标定位在区域上时才会更新，而不是意外地悬停在它上面。
这是我用来切换div内容的js：
function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
oShowHideDivs[i].style.display = 'none';
}
}
window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
oMap.areas[i].indx = i;
oMap.areas[i].onmouseover=function(){
showHideDivs(this.indx);
}
}
}那么我该如何实现延迟以及在哪里实现呢？提前谢谢你！1月
编辑:我现在使用了这种方法：
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}对我来说似乎是最简单的。谢谢你的提示！
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-03 03:37:49
最简单的方法是在mouseover上包含一个超时，并在mouseout上清除它。
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}对于更复杂的场景，可以使用像hoverintent这样的插件。
Stack Overflow用户
发布于 2012-12-03 03:33:49
您需要在一段时间后使用setTimeout()来调用函数showHideDivs()。如果用户在延迟结束前移动鼠标，就会停止调用此函数。
在这里看一个具体的例子：https://stackoverflow.com/a/6231142/1606729
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13672865
复制相关文章
相似问题
腾讯云开发者
