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

Question

我有一个

元素，我想要在用户连续悬停鼠标3秒后才触发事件。我的代码不太好用，因为它会在悬停后立即触发而不是"等待"。

代码：

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

- sortof

---

展示更多代码。创建一个 MCVE。 - Amit

http://jsfiddle.net/nn33vwvn/ 对我来说似乎是有效的。有什么问题吗？ - Daniel Casserly

Answer 1

你需要在某个地方存储超时 ID，并在鼠标移开时清除它。使用 data 属性来保存这个 ID 是很方便的:

你需要在某个地方存储超时 ID，并在鼠标移开时清除它。使用 data 属性来保存这个 ID 是很方便的:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>

- dfsq

---

趣闻：在Internet Explorer 11（可能适用于其他浏览器/版本）中，激活警报，然后将鼠标悬停在警报上会导致更多警报弹出。 - ThePyroEagle

@ThePyroEagle 哇，这个浏览器非常奇怪！结果发现即使警报在最上面，IE11仍会触发mouseout事件，这将阻止后续与页面的交互。奇怪的怪癖。 - dfsq

Answer 2

您可以通过 delay 选项来实现这一点：

工作演示

$('#elem').popover({
    trigger: "hover",
    delay: {show : 3000, hide : 0} });

- yakutsa

---

不是在jQuery中。没有jquery的“popover”。 - Jon P

@JonP，是的，你说得对。你可以通过简单地更改 popover 来触发 jQuery 中的任何事件。popover 来自 Bootstrap JS 库。 - yakutsa

Answer 3

请查看以下代码

var myVar;
$( "div#container" )
  .mouseover(function() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
  })
  .mouseout(function() {
    clearTimeout(myVar);
  });

div {
  background: red;
  margin: 20px;
  height: 100px;
  width: 100px;
  display:block;
  cursor: pointer;
  }
div:hover {
  background: yellow;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

- Pratik Shah

---

我喜欢这个解决方案。你能将它附加到每个具有特定类别的容器上，而不是按ID吗？ - Soma Holiday

@SomaHoliday：当然可以使用类名作为选择器而不是ID。只需使用$（“div.ClassName”）即可。 - Pratik Shah

Answer 4

假设您有一个id为myelement的div，您可以这样做：

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

顺便提一下，关于使用 mouseenter 和 mouseover，这里有一个有用的澄清问题：Jquery mouseenter() vs mouseover()。在选择要使用哪一个时，请考虑这一点。

- Marc

---

divMouseDown 应该改为 divMouseOver。 - Sebastian Nette

Answer 5

    
    var st;
    $(".inner_pic").mouseenter(function(e) { 
        var that = this;
        st = setTimeout(function() {
            alert('testing');
        }, 3000);
    }).mouseleave(function() {
         clearTimeout( st );    
         alert('finish'); 
    });  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
  <h3>Picture Here - Hover me</h3>
</div>

- PeterKA