3

我正在实现我自己的“工具提示”，每次将鼠标悬停在它上面时它都会创建一个新的 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 */
     }
);
4

2 回答 2

6

您的代码有效

我已将您的代码放在JSFiddle中并且可以正常工作，因此您一定还有其他问题。我可以在链接上尽可能快地移动鼠标，但每次都会删除工具提示。

我正在使用 Chrome。你的药是什么？

注意：我在 JSFiddle 中的代码与您的代码之间的唯一区别是我使用过append，而您使用过prepend. 出于明显的原因，我已经改变了这一点。尝试改变它，你会明白为什么。但它在两个方面都有效。

注意2：实际上如果你改变append它prepend实际上模拟了快速鼠标移动，因为当一个对象被前置时，鼠标悬停在链接之外。因此，与其尽可能快地移动鼠标，不如移动元素来模拟相同的行为。

实际问题

问题是您在创建 tooltip 之前在悬停中执行其他操作。这是否是 Ajax 调用并不重要。它可能是任何异步的，因此 Javascript 线程可以执行下一个函数。如果它执行的时间比你停留在元素上的时间长，你的鼠标移出想要删除尚未创建的东西（稍后会）。

两种可能的解决方案：

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

警告

我强烈建议不要在悬停事件中执行ajax 代码，因为您可能会触发很多请求。实际上，不仅仅是浏览器可以处理的。如果您必须在悬停时执行 ajax 请求，请按以下方式执行：hover 触发并准备在其后立即执行的函数调用，但该函数仅在尚未进行时才会发出 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);
于 2012-09-04T15:32:34.167 回答
1

是的，有问题。让速度根本不是一个因素 - 不要让它碰运气，并确保当你悬停时，你的悬停激活 - 当你悬停时，你的悬停激活！万无一失！这样，您就不会像您所说的那样陷入“扩展”！换句话说，“来回切换样式”一次执行一个事件，而不是使用持久处理程序。

（请参阅示例代码 - 如果您使用的元素当然更大，则效果很好） - http://jsfiddle.net/4jArC/

var fieldName = "whatever";

function b(evt) { /* Remove Tooltip from DOM */
    $('#' + fieldName + '_tooltip').remove();
    $(evt.currentTarget).one('mouseover',a);
}

function a (evt) { /* Create new DOM element */
    /* My ajax stuff here */
    var data = 'test';
    var tooltipBox = $('<div id="' + fieldName + '_tooltip">' + data + '</div>');
    $("body").prepend(tooltipBox);
    $(evt.currentTarget).one('mouseout',b);
}

$('#' + fieldName).one('mouseover', a);
​
于 2012-09-04T15:40:17.193 回答