鼠标悬停/鼠标输入闪烁与工具提示的交互

问题描述：

鼠标悬停在父元素上侦听，但是当移动到工具提示(子)元素时，它会闪烁.控制台日志显示好像 mouseover/mouseenter 事件被快速触发

The mouseover listens on the parent element, but when moving into the tooltip (child) element, it flickers. The console log show as if mouseover / mouseenter event is fired rapidly

Mouseenter 根本不保留 tooptip 显示

Mouseenter does not keep tooptip display at all

  element.on('mouseenter', hoverIn); // or mouseover
  element.on('mouseleave', hoverOut);

这个问题是 angularjs/jquery/bootstrap 特有的吗?

Is this issue angularjs / jquery / bootstrap specific ?

如何更好地处理?

您可以使用这个plnkr进行测试.

答

首先，您的演示中没有 jQuery.然后，我认为，问题的原因是在指令中设置 tooltipState 之间的竞争条件

First of all, there is no jQuery in your demo. Then, I think, the cause of the issue is the race condition between setting tooltipState in your directive

scope.tooltipState = false;
scope.$apply();

并通过引导程序 uib-tooltip 指令处理 tooltipState 属性.如果您删除 scope.$apply()，这将变得更加明显:两个指令都在争取 tooltipState 和 scope.$apply() 只是使它更精简一些.

and handling the tooltipState attribute by the bootstrap uib-tooltip directive. That become more obvious if you remove scope.$apply(): both directives are fighting for tooltipState and scope.$apply() just makes it a bit more streamlined.

为了解决这个问题，我会尝试使用 uib-tooltip-template 选项并在引导程序的工具提示元素本身上设置自定义 tool-tip 指令.然后我将处理 only mouseleave 事件，并在我们离开工具提示时删除 tooltipState 标志.此外，如果目标是按钮，则使用 event.relatedTarget 我们可能不会删除 tooltipState 标志.

To solve it I would try to use uib-tooltip-template option and set up custom tool-tip directive on the bootstrap's tooltip element itself. Then I would handle only mouseleave event and would drop the tooltipState flag when we are leaving the tooltip. Also, using event.relatedTarget we may not drop the tooltipState flag if the target is button.

鼠标悬停/鼠标输入闪烁与工具提示的交互

相关推荐