Javascript 如何在悬停3秒后触发事件

我有一个div，我只想在用户连续悬停鼠标3秒后触发一个事件。我的代码工作不好，因为它在悬停后立即启动，并且不“等待”

代码：

$(".inner_pic").mouseenter(function () {
    setTimeout(function () {
        alert('testing');
    }, 3000);
}).mouseleave(function () {
    alert('finish');
});  

---

您可以通过

delay

选项来实现这一点：

---

您需要将超时id存储在某个位置，并在mouseout上清除它。使用数据属性保存此id很方便：

$（“.inner_pic”）.mouseenter（函数（）{
$（此）.data（'timeout'，setTimeout（函数（）{
警报（“测试”）；
}, 3000));
}).mouseleave（函数（）{
clearTimeout（$（this.data（'timeout'））；
警报（“完成”）；
});

图片
尝试以下代码：

<div id='a' style="border:2px solid black" >
    <h3>Hove On me</h3>
    For 2000 milliseconds. You will get an alert.
    </br>
    </div>

$(document).ready(function(){
   var delay=2000, setTimeoutConst;
   $('#a').hover(function(){
        setTimeoutConst = setTimeout(function(){
            /* Do Some Stuff*/
           alert('Thank You!');
        }, delay);
   },function(){
        clearTimeout(setTimeoutConst );
   })
})

</script>


你骗了我
持续2000毫秒。你会得到一个警告。


$（文档）.ready（函数（）{
var延迟=2000，setTimeoutConst；
$（'#a'）。悬停（函数（）{
setTimeoutConst=setTimeout（函数（）{
/*做点什么*/
警惕（“谢谢！”）；
}，延误）；
}，函数（）{
clearTimeout（setTimeoutConst）；
})
})

演示：

检查以下代码


var-myVar；
$（“div#container”）
.mouseover（函数（）{
myVar=setTimeout（函数（）{alert（“Hello”）；}，3000）；
})
.mouseout（函数（）{
清除超时（myVar）；
});
div{
背景：红色；
利润率：20px；
高度：100px；
宽度：100px；
显示：块；
光标：指针；
}
div:悬停{
背景：黄色；
}



var-st；
$（“.inner_pic”）.mouseenter（函数（e）{
var=这个；
st=设置超时（函数（）{
警报（“测试”）；
}, 3000);
}).mouseleave（函数（）{
清除超时（st）；
警报（“完成”）；
});  

图片在这里-悬停我
假设您有一个
div
和
id
的
myelement
，您可以执行以下操作：

var divMouseOver;
$('#myelement').mouseover(function() {
  divMouseOver = setTimeout(function() {
     alert("3 seconds!"); //change this to your action
  }, 3000);
});
$('#myelement').mouseout(function() {
  if (divMouseOver) {
    clearTimeout(divMouseOver);
  }
});

顺便说一句，tere提出了一个有助于澄清的问题：在此处使用
mouseenter
和
mouseover
：。在选择使用的时候考虑这一点。
显示更多代码。创建一个对我来说似乎有效的模型。有什么问题吗？
divMouseDown
应该是
divMouseOver
但是。有趣的注意：当Internet Explorer 11（可能是其他浏览器/版本）激活警报，然后用我的鼠标悬停在警报上时，会打开更多的警报。@ThePyroEagle哇，这是一个非常奇怪的浏览器！事实证明，在这种情况下，即使警报位于顶部，IE11也会触发mouseout事件，这将阻止后续与页面的交互。奇怪的怪癖。不在jQuery中。没有jquery
popover
@JonP，是的，你是对的。只需更改
popover
，就可以触发jquery中的任何事件
popover
来自bootstrap js库。我喜欢这个解决方案。您能将其附加到每个具有特定类而不是id的容器吗？@SomaHoliday:是的，您当然可以使用ClassName作为选择器，而不是id。。只需使用
$（“div.ClassName”）
var divMouseOver;
$('#myelement').mouseover(function() {
  divMouseOver = setTimeout(function() {
     alert("3 seconds!"); //change this to your action
  }, 3000);
});
$('#myelement').mouseout(function() {
  if (divMouseOver) {
    clearTimeout(divMouseOver);
  }
});