javascript - 单击时工具提示覆盖不会消失

Question

我对 jquery 很陌生，并且遇到了一个错误。每当我将鼠标悬停在页面上的按钮上时，它都会弹出一个小工具提示。当我移动鼠标时，它就消失了。但是，如果我单击该按钮，工具提示就会卡住，我不知道为什么。它只是停留在那里，直到我重新加载页面。这是代码:

_controls.html.erb

    <%= link_to 'Abandoned', priority, :class => 'abandoned', :'data-status' => 'abandoned',
                            :title => 'Mark as ABANDONED', :rel => 'tipsy' %>
    <%= link_to 'New', priority, :class => 'new', :'data-status' => 'new',
                            :title => 'Mark as NEW', :rel => 'tipsy' %>
    <%= link_to 'Started', priority, :class => 'started', :'data-status' => 'started',
                            :title => 'Mark as STARTED', :rel => 'tipsy' %>
    <%= link_to 'Completed', priority, :class => 'completed', :'data-status' => 'completed',
                            :title => 'Mark as COMPLETED', :rel => 'tipsy' %>
</div>

优先jquery js文件的一部分

...
jQuery.fn.priority = function()
{
    var priority = this;

    priority.bind('click', function(event) {
        event.stopPropagation();
        priority.selectPriority();
    });

    priority.bind('unselected', function() {
        priority.find('a.more').tipsy('hide');
    });

...

jQuery.fn.selectPriority = function()
{
    $('.priority.selected').not(this).unselectPriority();
    this.addClass('selected');
};

jQuery.fn.unselectPriority = function()
{
    this.triggerHandler('unselected');
    this.removeClass('selected');
};

您知道为什么单击按钮后工具提示覆盖层不会消失吗？

PS 我没有写这段代码，我只是想调试它。如果这不是工具提示所在位置的正确代码，请告诉我。

更新:工具提示有时会卡住。我删除了 event.stopPropagation();结果还是发生了。

Answer 1

您可以尝试取出绑定(bind)并直接在事件中调用醉酒隐藏，如下所示: $('#element').tipsy('hide') 这可能会帮助您调试它。我的一些东西也遇到了同样的问题，调用 hide 解决了它。查看醉酒页面上的“手动触发工具提示”:http://onehackoranother.com/projects/jquery/tipsy/

另一种选择是在元素上使用delayOut函数，如下所示:

 $('.mg-unrd').tipsy({gravity:'s', delayIn: 10, delayOut: 5});

delayOut 对我来说比 hide 效果更好，但有时还是会让我产生幻觉。

实际上，我发现这段代码可以正确解决这个问题...在 Tipsy.js 文件中，大约第 170 行，我向 eventOut 添加了一个 mousedown，万岁!

//eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
eventOut = options.trigger == 'hover' ? 'mousedown mouseleave' : 'blur';