鼠标移出后触发jQuery Ajax mouseover事件 [英] jQuery Ajax mouseover event firing after mouseout

问题描述

我正在使用jQuery创建一个工具提示，该提示通过Ajax请求获取工具提示内容，然后将其存储在一个变量中，这样Ajax不会在每次鼠标悬停时不断触发.除非您在节点上快速滑动鼠标，然后将其加载并显示工具提示，而不是按照鼠标输出中的定义将其隐藏，否则所有操作都可以正常进行.

I'm creating a tooltip using jQuery that gets the tooltip contents via Ajax request and then stores it in a variable so Ajax isn't constantly fired off every time they mouseover. It all works perfectly except if you quickly swipe your mouse across a node and out it will load the tooltip and display it rather than hide it as defined in the mouseout.

预期事件的顺序:1.将鼠标移到2. Ajax加载内容并将其放置在隐藏的工具提示div中3.将工具提示调整到节点的一角并显示4.鼠标移出5.工具提示从视图中隐藏

Order of events expected: 1. Mouse over 2. Ajax loads content and places it in hidden tooltip div 3. Tooltip is adjusted to the corner of the node and shown 4. Mouse out 5. Tooltip is hidden from view

在以上场景中看到的事件顺序:1.将鼠标移到2.快速移出鼠标3.工具提示从视图中隐藏4. Ajax会加载内容，并且工具提示会显示在固定位置，直到再次将鼠标悬停以删除它为止.

Order of events seen in the scenario above: 1. Mouse over 2. Mouse out quickly 3. Tooltip is hidden from view 4. Ajax loads content and tooltip is shown in a fixed position until you mouse over again to get rid of it.

这是适用的代码，显然有一个更大的对象被写入，但是我想您会明白的.

Here's the applicable code, there's obviously a bigger object that this is written in but I think you'll get the gist.

//Cancel code snippet
$('.tt').html();
$('.tt').hide();

//Tooltip init code snippet
$.ajax({
    type: "GET",
    url: "/tooltip/" + Tooltip.slug,
    dataType: "json",
    global: false,
    success: function(data) {
        $('.tt').html(data.description);
        Tooltip.init();
        $('.tt').attr("style","left:"+Tooltip.settings.left_offset+"px;top:"+Tooltip.settings.top_offset+"px");
        Tooltip.cache[slug] = data;
        $('.tt').show();
    }
});

推荐答案

之所以发生这种情况，是因为当鼠标已经离开节点时，ajax请求尚未完成.它只会做它的事情，等待服务器的响应，然后显示成功功能中定义的工具提示.

That's happening because the ajax request is not finished yet when the mouse has already left the node. It will just do its thing, wait for a response from the server, and then show the tooltip as defined in your success function.

解决此问题的一种方法是使用一个变量，例如 isHovering ，该变量包含当前正在悬停的节点.您可以为此使用节点的ID:将鼠标悬停时将其添加到var中(在触发ajax函数之前)，并在鼠标移出时将var设置回false.

One way to combat this would be to have an variable, say isHovering, which contains the node that is currently being hovered over. You could use the node's id for this: add it to the var immediately upon hover (before firing the ajax function), and set the var back to false upon mouseout.

然后，在您的ajax函数中，在渲染任何内容之前，检查var并仅在其包含正确的id时进行渲染.

Then, in your ajax function, before rendering anything, check the var and only render if it contains the correct id.

我的头顶上方(未经测试):

Off the top of my head (not tested):

var isHovering = false;
$('.node').mouseover(function() {
      isHovering = $(this).attr('id');
}).mouseout(function() {
      isHovering = isHovering == $(this).attr('id') ? false : isHovering; //don't change if mouse on different node
});

，然后在您的ajax()函数中:

and then in your ajax() function:

//Tooltip init code snippet
$.ajax({
    type: "GET",
    url: "/tooltip/" + Tooltip.slug,
    dataType: "json",
    global: false,
    success: function(data) {
        if(isHovering == $(this).attr('id')) {
           $('.tt').html(data.description);
           Tooltip.init();
           $('.tt').attr("style","left:"+Tooltip.settings.left_offset+"px;top:"+Tooltip.settings.top_offset+"px");
           $('.tt').show();
        }

        Tooltip.cache[slug] = data; //still cache it
    }
});

这篇关于鼠标移出后触发jQuery Ajax mouseover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！