javascript - 在鼠标悬停时为 jquery 事件添加延迟

Question

我正在尝试为孩子的鼠标悬停事件添加一个简单的延迟并且遇到困难。（仍然在学习！）

这使我能够在延迟后显示弹出窗口，但同时显示所有这些：

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

这可以立即显示我想要的弹出窗口：

onmouseover='$(this).children(\".skinnyPopup\").show()'

但组合不会：

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

任何帮助，将不胜感激。谢谢！

Answer 1

您需要定义this它何时执行，这样的事情会起作用：

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

或者只是使用.delay()，像这样：

$(this).children(".skinnyPopup").delay(600).show(0);

以上两种方法都是快速修复，我建议您远离内联处理程序并检查一种不显眼的方法（出于某些重要原因，请参阅Russ Cam的这个答案），例如：

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});

Answer 2

这是因为this绑定到全局上下文，而不是元素。请改用以下内容：

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

如果您坚持使用内联事件处理程序，则以下内容也应该有效：

onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'