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)并直接在事件中调用 tipsy hide，如下所示:$('#element').tipsy('hide') 这可能有助于您调试它.我在我的一些东西中遇到了同样的问题，调用 hide 解决了它。查看醉酒页面上的“手动触发工具提示”:http://onehackoranother.com/projects/jquery/tipsy/

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

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

delayOut 比 hide 对我更有效，hide 有时仍然让我产生幻觉。

实际上，我已经找到了正确解决它的这段代码...在 Tipsy.js 文件中，大约第 170 行，我向 eventOut 添加了一个 mousedown，万岁!

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