jQuery UI 工具提示在源 DOM 元素移动时卡住打开

jQuery UI tooltip is stuck open when the source DOM element moves

本文关键字：移动 元素 工具提示 UI DOM jQuery      更新时间：2023-09-26

我有一个div，其中包含一些可以拖放的缩略图。 当一个缩略图放在另一个缩略图的顶部时，它们会交换位置。 我使用 AngularJS 并操作$scope上的底层数据来做到这一点。

无论如何，这就是问题所在：

缩略图

具有工具提示，当我将鼠标悬停在缩略图上时会打开这些提示。 当我单击并开始拖动缩略图（我们称其为源缩略图）时，其工具提示会消失（应该消失）。 目前为止，一切都好。 但是，当我将缩略图放在另一个缩略图上时，会出现目标缩略图的工具提示，因为鼠标当前悬停在目标工具提示上。

一秒钟后，底层模型交换了两条数据，DOM 更新以反映更改 - 有效地交换了两个缩略图。 现在，目标的工具提示仍然打开，但我的鼠标不再在目标上，因为它刚刚被交换了！ 工具提示将保持打开状态，直到我在新位置重新触发工具提示事件。

大约 50% 的时间会观察到此行为，但我可以通过在更改基础数据之前添加短暂（~1 秒）延迟来人为地 100% 重现它，从而导致缩略图切换位置。

注意：此问题不会在Chrome中发生，但在Firefox和IE中会发生。 我还没有尝试过 Safari。

有没有人遇到过这个问题，或类似的事情？ 如果我能提供任何进一步的细节，请告诉我。 谢谢！

编辑：这是一个说明问题的jsfiddle

示例：jsfiddle

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
        $.widget.bridge('uitooltip', $.ui.tooltip);
    </script>
<div ng-app="myApp">
    <div ng-controller="ContentController">
        <div class="indent">
            <div ng-repeat="square in squares" style="width: 400px">
                <item data="square" helper="helperFunction"></item>
            </div>
            Drag the top box onto the bottom box and keep the mouse cursor stationary for ~1 second.  The tooltip will be stuck open when the boxes switch places.  Dragging the bottom box to the top box, however, does not have this problem.
            <br><br>
            Also, this problem seems to only be present in Firefox and IE.  Chrome works as expected.
        </div>
    </div>
</div>

您可以将默认浏览器工具提示替换为 jquery 版本：

$('*').tooltip({track: true});

然后，您可以将拖动元素时禁用的工具提示设置为禁用：

$('.thumbnail').tooltip('disable');

删除时，再次启用它们：

$('.thumbnail').tooltip('enable');

http://jsfiddle.net/uHuDp/1/

编辑：对于您的示例：

 $(element).find("span.item-outer").uitooltip('disable');
 $(element).find("span.item-outer").uitooltip('enable');

http://jsfiddle.net/uHuDp/260/

相关文章：