Question

我有一些最初为display: none的叠加元素，但当我将鼠标悬停在页面上的特定项目上时会转到display: inline，当鼠标悬停在其他内容上时会再次消失。与工具提示完全相同的行为，不同之处在于此叠加对象具有可点击和交互的元素（例如jquery accordion）。

一切都很完美，直到我与这些叠加元素进行交互，即点击叠加元素中的一个可点击项目。然后，一旦该重叠项再次成为display:none ，当我将鼠标悬停在某个项目上以找到其对应的叠加元素时，该页面变得非常滞后（它们被选中他们的身份）以及它的出现和消失。

奇怪的是，如果我点击html正文的任何地方，滞后就会消失，一切都会变得很快。

出于绝望，我尝试以编程方式将覆盖元素设置回blur后调用focus，trigger('click')，display:none但到目前为止没有任何帮助，我必须手动点击页面才能消除滞后。

知道导致此类行为的原因以及我如何解决这个问题？感谢，

修改：代码

CSS部分：

span.overlay {
    z-index:10;
    display:none;
    position:absolute;
}    
span.visible { display:inline; }

HTML部分：许多此类span元素，每个元素都有自己唯一的ID。

<span class='overlay ui-widget-content' id='xyz'>
   <!-- lots of stuff here -->
</span>

javascript部分：

/* displays overlay element when user hovers over the first td */
$('table.foo > tbody > tr > td:first-child').hover(
    function(e) {
        $(this).parent().tooltip('disable');
        var elem = $('#' + $(this).parent().data('overlay-id'));
        if (!elem.hasClass('visible')) {
            elem.css('left', e.pageX + 20).css('top', e.pageY).addClass('visible');
            elem.find('.accordion:first').accordion('refresh');
        }
    }, function() {
        var elem = $('#' + $(this).parent().data('overlay-id'));
        if (! elem.is(':hover') && ! elem.hasClass('pin')) {
            $(elem).removeClass('visible');
        }
        $(this).parent().tooltip('enable');
    });

/* if mouse leaves span.visible and it is not pinned it will hide the span */
$('body').on('mouseleave', 'span.visible',
    function() {
      if (!$(this).hasClass('pin')) {
        $(this).removeClass('visible');
      }
    });

修改：对代码进行概要分析，似乎get offsetHeight和get offsetWidth比以前更长。然而，我不知道为什么会发生这种情况以及为什么它应该通过点击页面而消失。

profile profile-2

以前，当我没有观察到这个问题时，这两个函数各占不到3％。

Answer 1

尝试在打开＆＃34;工具提示＆＃34;时绑定mouseleave事件。用此替换您的代码（未经测试）：

/* displays overlay element when user hovers over the first td */
$('table.foo > tbody > tr > td:first-child').on('mouseenter',
    function(e) {
        $(this).parent().tooltip('disable');
        var elem = $('#' + $(this).parent().data('overlay-id'));
        if (!elem.hasClass('visible')) {
            elem.css('left', e.pageX + 20).css('top', e.pageY).addClass('visible');
            elem.find('.accordion:first').accordion('refresh');

            // notice the "ONE" handler, it'll unbind the event after execution
            elem.one('mouseleave', function() {
                if (!$(this).hasClass('pin')) {
                    $(this).removeClass('visible');
                }
                $(this).parent().tooltip('enable');
            });
        }
    }
);

请注意one侦听器在首次执行事件后取消绑定该事件。我不能保证这会解决您的问题，但是当页面有很多元素并且浏览器需要检查快速变化的悬停事件时，我经历了很多性能命中。这样浏览器只需要检查一个mouseleave事件。如果它发生了，它又消失了。看来你可能有太多的束缚事件而且没有正确清理它们。

我不确定我是否正确复制了您想要的功能所以如果我错过了某些内容请添加代码。我不确定为什么你需要通过body AND .hover()绑定一个mouseleave事件。

通过单击html正文上的任何位置消失的奇怪延迟

1 个答案: