快速移动的鼠标永远不会触发 mouseleave 事件答案

【问题标题】：Fast moving mouse never triggers mouseleave event快速移动的鼠标永远不会触发 mouseleave 事件
【发布时间】：2023-03-21 02:59:01
【问题描述】：

当鼠标悬停在我网站上的某些按钮上时，我希望出现用于指导用户的工具提示。基本上，只要将鼠标悬停在具有“has_tooltip”类的按钮上，就会附加一个工具提示。

$('.has_tooltip').live({
    mouseenter  : function(e) {
        if($('#tooltip_container').length > 0){
            $('#tooltip_container').remove();
        }

        var $t = $(this), text = $t.attr('rel'), left = e.pageX-25, top = e.pageY-25;
        if($t.attr('rev') === '1') {
            text += ' <span class="tooltip_warning">You must be <a href="/users/login" class="modal-dynamic">logged in</a> to make use of this.</span>'
        }
        $tooltip = $('<div id="tooltip_container">'+text+'</div>');
        $('body').prepend($tooltip);

        $tooltip.css({
            left: left+'px',
            top: top+'px'
        });

    },

});

当用户的光标离开新创建的工具提示框时，它应该会消失

$('#tooltip_container').live({
    mouseleave : function(e){
        $(this).remove();
    }

});

但是，快速移动的鼠标悬停在具有“has_tooltip”类的按钮上会添加工具提示，但移动太快而无法触发 mouseleave 事件。

有人对我如何解决这个问题有一些建议吗？

【问题讨论】：

标签： javascript mouseleave

【解决方案1】：

'如果鼠标没有进入tooltip（tooltip出现在鼠标下方），浏览器可能不会触发mouseleave事件。您可能需要添加一个额外的选择器。试试这个：

$('#tooltip_container','.has_tooltip').live({
    mouseleave : function(e){
        $('#tooltip_container').remove();
    }
});

我强烈建议从您的工具提示方法中删除 HTML...尝试创建一个空 div 并在您显示它时添加工具提示文本和定位 - 尝试尽可能少地添加到 DOM（创建大多数工具提示 HTML 的隐藏 div，仅根据需要更改其实际文本内容。

理想情况下，您的 mouseenter 应该简单地替换工具提示文本并以正确的位置显示 div。 mouseleave 事件应该只是 hide() 工具提示 div（而不是将其从 DOM 中删除，以便稍后创建并再次添加）。

【讨论】：