延迟 onmouseover javascript答案

【问题标题】：Delay onmouseover javascript延迟 onmouseover javascript
【发布时间】：2012-12-02 19:25:06
【问题描述】：

我对大多数网络开发的东西都很陌生，所以我恳请您提供一些支持。我有一个图像映射，我在其中分配了几个区域，在单独的 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);
    }
  }
}

那么我如何实现延迟以及在哪里实现？提前谢谢！一月

编辑：我现在使用这种方法：

oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}

对我来说似乎是最简单的。谢谢你的提示！

【问题讨论】：

你愿意使用 jQuery 吗？查看this question 和this jsfiddle。

标签： javascript hover onmouseover

【解决方案1】：

最简单的方法是在鼠标悬停时包含一个超时，并在鼠标悬停时将其清除。

oMap.areas[i].onmouseover=function(){
    var area=this;
    var delay=setTimeout(function(){showHideDivs(area.indx);},100);
    area.onmouseout=function(){clearTimeout(delay);};
}

对于更复杂的场景，请使用hoverintent 之类的插件。

【讨论】：

巧妙解决看似微不足道的问题。

【解决方案2】：

您需要使用 setTimeout() 在一定延迟后调用您的函数showHideDivs()。如果用户在延迟结束前移动鼠标，则停止调用此函数。

在这里查看具体示例：https://stackoverflow.com/a/6231142/1606729

【讨论】：