Javascript 快速移动的鼠标不会触发mouseleave事件

Javascript 快速移动的鼠标不会触发mouseleave事件,javascript,mouseleave,Javascript,Mouseleave,当鼠标移动到我网站上的某些按钮上时,我希望出现一些工具提示来指导用户。基本上,只要鼠标移过带有“has_tooltip”类的按钮,就会附加一个工具提示 $('.has_tooltip').live({ mouseenter : function(e) { if($('#tooltip_container').length > 0){ $('#tooltip_container').remove(); } v

当鼠标移动到我网站上的某些按钮上时,我希望出现一些工具提示来指导用户。基本上,只要鼠标移过带有“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'
        });

    },

});
但是,在具有“has_tooltip”类的按钮上快速移动鼠标会添加工具提示,但移动太快,无法触发mouseleave事件


任何人都有关于如何解决此问题的提示吗?

'如果鼠标未进入工具提示(工具提示显示在鼠标下方),浏览器可能不会触发mouseleave事件。您可能需要添加一个附加选择器。试试这个:

$('#tooltip_container','.has_tooltip').live({
    mouseleave : function(e){
        $('#tooltip_container').remove();
    }
});
我强烈建议从工具提示方法中删除HTML。。。尝试创建一个空div,并在显示工具提示文本时添加工具提示文本和定位——尝试尽可能少地添加到DOM中(为大多数工具提示HTML创建一个隐藏div,并仅在必要时更改其实际文本内容)

理想情况下,鼠标指针应该简单地替换工具提示文本,并用正确的位置显示div。mouseleave事件应该只隐藏()工具提示div(而不是将其从DOM中删除,以便稍后创建和添加)

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