JQuery - Hover事件不向Hover out开火

Question

我正在实现我自己的“工具提示”，它在每次悬停时创建一个新的div元素，并在悬停时移除它。下面的代码被从我使用的代码中删除，但它显示了一个问题:当用户缓慢地将鼠标放在$('#‘+ fieldName)对象上，但是当您将鼠标移动到对象上，然后迅速将其从工具提示中删除时，这段代码工作得很好。有办法改进我的代码吗？

我尝试实现一个系统，在这个系统中，我创建了所有的工具提示框，并将它们隐藏起来，然后在悬停时显示它们，但是它带来了同样的问题:鼠标快速地离开对象，悬停也没有触发。

$('#' + fieldName).hover(
    function () { /* Create new DOM element */
        /* My ajax stuff here */
        var data = 'test';
        var tooltipBox = $('<div id="' + fieldName + '_tooltip">' + data + '</div>');
        $("body").prepend(tooltipBox);
    },
    function () { /* Remove Tooltip from DOM */
        $('#' + fieldName + '_tooltip').remove();
    }
);

答案：

在Robert Koritnik和sajawikio的帮助下：

如果您需要在悬停时使用AJAX调用制作工具提示，那么您可以做一些小的攻击来使其工作。

var callingAjax = false;
var removeTooltip = false;
$('#tooltip').hover(
     function() {
          callingAjax = true;
          $.post(.. {
              callingAjax = false;
              /* do stuff */
              if(removeTooltip)
                   /* code to remove tooltip */
              removeTooltip = false;
          });
     },
     function() {
          if(callingAjax) 
              removeTooltip = true;
          else
              /* code to remove tooltip */
     }
);

Answer 1

你的代码有效

我已经将您的代码放入了一个JSFiddle中，它可以工作，所以您肯定还有其他问题。我可以移动鼠标在链接上尽可能快，但工具提示每次都会被删除。

我在用Chrome。你的药是什么

Note：我在JSFiddle中的代码与您的代码之间的唯一区别是，我使用了append，而您使用了prepend。我改变这个是出于明显的原因。试着改变它，你就会明白为什么。但它在两方面都有效。 Note 2：实际上，如果您将append更改为prepend，它实际上会模拟快速的鼠标移动，因为当对象预先被平放时，鼠标就会悬停在链接之外。因此，与其尽可能快地移动鼠标，不如移动元素来模拟相同的行为。

实际问题

问题是在创建工具提示之前，您正在执行悬停中的其他事情。这是否是Ajax调用并不重要。它可能是异步的，所以Javascript线程可以执行下一个函数。如果执行的时间比您在元素上停留的时间长，则鼠标out希望删除尚未创建的内容(稍后将如此)。

有两种可能的解决办法：

1. 首先添加工具提示，，然后执行其他内容。
2. 在悬停事件执行后推迟Ajax调用。

警告

我强烈建议不要在悬停事件中执行 ajax代码，因为您可能会触发大量请求。事实上，浏览器所能处理的更多。如果您必须在悬停时执行ajax请求，那么就这样做: only触发并准备一个函数调用，在此之后立即执行，但是该函数只有在尚未执行的情况下才会发出Ajax调用：

// variable outside of hover closures
var ajaxExecuting = false;

// code to put within your hover handler
setTimeout(function() {
    if (!ajaxExecuting)
    {
        ajaxExecuting = true;
        // do your AJAX stuff
    }
}, 0);