HTML

动态标准 - 最后更新 2024 年 9 月 12 日

1. 1. 6.12 popover 属性
      1. 6.12.1 弹出目标属性
      2. 6.12.2 弹出轻量级关闭

6.12 popover 属性

所有 HTML 元素 都可以设置 popover 内容属性。如果指定了此属性，则元素在显示之前不会被渲染，而是在显示时会渲染在其他页面内容之上。

<ul>
  <li>
    <a href=...>All Products</a>
    <button popovertarget=sub-nav>
     <img src=down-arrow.png alt="Product pages">
    </button>
    <ul popover id=sub-nav>
     <li><a href=...>Shirts</a>
     <li><a href=...>Shoes</a>
     <li><a href=...>Hats etc.</a>
    </ul>
  </li>
  <!-- other list items and links here -->
</ul>

在没有辅助功能语义的元素上使用 popover 时，例如 div 元素，作者应使用适当的 ARIA 属性以确保弹出窗口是可访问的。

<button popovertarget=m>Actions</button>
<div role=menu id=m popover>
  <button role=menuitem tabindex=-1 autofocus>Edit</button>
  <button role=menuitem tabindex=-1>Hide</button>
  <button role=menuitem tabindex=-1>Delete</button>
</div>

<button id=submit>Submit</button>
<p><output><span popover=manual></span></output></p>

<script>
 const sBtn = document.getElementById("submit");
 const outSpan = document.querySelector("output [popover=manual]");
 let successMessage;
 let errorMessage;

 /* define logic for determining success of action
  and determining the appropriate success or error
  messages to use */

 sBtn.addEventListener("click", ()=> {
  if ( success ) {
   outSpan.textContent = successMessage;
  }
  else {
   outSpan.textContent = errorMessage;
  }
  outSpan.showPopover();

  setTimeout(function () {
   outSpan.hidePopover();
  }, 10000);
 });
</script>

将弹出窗口元素插入 output 元素通常会导致屏幕阅读器在弹出窗口变为可见时宣布其内容。根据内容的复杂程度或频率，这对使用这些辅助技术的用户来说可能有用或令人讨厌。在使用 output 元素或其他 ARIA 实时区域时请记住这一点，以确保最佳用户体验。

popover 属性是一个 枚举属性，具有以下关键字和状态

属性的 缺失值默认值 是 无弹出 状态，其 无效值默认值 是 手动 状态。

popover IDL 属性必须 反映 popover 属性，仅限于已知值。

每个 HTML 元素 都有一个 弹出可见性状态，最初为 隐藏，具有以下潜在值

• 隐藏

• 显示

Document 具有一个 弹出指针按下目标，它是一个 HTML 元素 或 null，最初为 null。

每个 HTML 元素 都有一个 弹出调用者，它是一个 HTML 元素 或 null，最初设置为 null。

每个 HTML 元素 都有一个 弹出显示或隐藏，它是一个布尔值，最初设置为 false。

每个 HTML 元素 弹出切换任务跟踪器，它是一个 切换任务跟踪器 或 null，最初为 null。

每个 HTML 元素 都有一个 弹出关闭观察者，它是一个 关闭观察者 或 null，最初为 null。

以下 属性更改步骤，给定 element、localName、oldValue、value 和 namespace，用于所有 HTML 元素

1. 如果 namespace 不是 null，则返回。

2. 如果 localName 不是 popover，则返回。

3. 如果 element 的 弹出可见性状态 处于 显示状态 且 oldValue 和 value 处于不同的 状态，则运行 隐藏弹出算法，给定 element、true、true 和 false。

element.showPopover()

通过将弹出窗口 element 添加到顶层来显示它。如果 element 的 popover 属性处于 自动 状态，则这也会关闭所有其他 自动 弹出窗口，除非它们是 element 的祖先，根据 最顶层弹出祖先 算法。

element.hidePopover()

通过从顶层移除弹出窗口 element 并对其应用 display: none 来隐藏它。

element.togglePopover()

如果弹出窗口 element 未显示，则此方法会显示它。否则，此方法会隐藏它。如果在调用此方法后弹出窗口处于打开状态，则此方法返回 true，否则返回 false。

showPopover() 方法步骤是运行 显示弹出，给定 this、true 和 null。

要 显示弹出，给定 HTML 元素 element、布尔值 throwExceptions 和 HTML 元素 或 null invoker

1. 如果运行 检查弹出窗口有效性 给定 element、false、throwExceptions 和 null 的结果为 false，则返回。

2. 令 document 为 element 的 节点文档。

3. 断言：element 的 弹出调用者 为 null。

4. 断言：element 不在 document 的 顶层 中。

5. 令 nestedShow 为 element 的 弹出显示或隐藏。

6. 将 element 的 弹出显示或隐藏 设置为 true。

7. 令 cleanupShowingFlag 为以下步骤

   1. 如果 nestedShow 为 false，则将 element 的 弹出显示或隐藏 设置为 false。

8. 如果 触发事件 的结果（名为 beforetoggle，使用 ToggleEvent，其 cancelable 属性初始化为 true，oldState 属性初始化为 "closed"，newState 属性初始化为 "open" 在 element 上）为 false，则运行 cleanupShowingFlag 并返回。

9. 如果运行 检查弹出窗口有效性 给定 element、false、throwExceptions 和 document 的结果为 false，则运行 cleanupShowingFlag 并返回。

   再次调用 检查弹出窗口有效性，因为触发 beforetoggle 事件可能会断开此元素的连接或更改其 popover 属性。

10. 令 shouldRestoreFocus 为 false。

11. 如果 element 的 popover 属性处于 自动 状态，则

    1. 令 originalType 为 element 的 popover 属性的值。

    2. 令 ancestor 为运行 最顶层弹出祖先 算法（给定 element、invoker 和 true）的结果。

    3. 如果 ancestor 为 null，则将 ancestor 设置为 document。

    4. 运行 隐藏所有弹出窗口直到，给定 ancestor、false 和 not nestedShow。

    5. 如果 originalType 不等于 element 的 popover 属性的值，则

       1. 如果 throwExceptions 为 true，则抛出一个 "InvalidStateError" DOMException。

       2. 返回。

    6. 如果在给定 element、false、throwExceptions 和 document 的情况下运行 检查 popover 有效性 的结果为 false，则运行 cleanupShowingFlag 并返回。

       检查 popover 有效性 再次被调用，因为上面运行 隐藏所有 popover 直到 可能触发了 beforetoggle 事件，并且事件处理程序可能已断开此元素的连接或更改了其 popover 属性。

    7. 如果在 document 上运行 最顶层的自动 popover 的结果为 null，则将 shouldRestoreFocus 设置为 true。

       这确保仅在堆栈中的第一个 popover 中将焦点返回到之前聚焦的元素。

    8. 将 element 的 popover 关闭观察器 设置为在给定 element 的 相关全局对象 的情况下 建立关闭观察器 的结果，其中

       • 取消操作 是返回 true。

       • 关闭操作 是在给定 element、true、true 和 false 的情况下 隐藏 popover。

12. 将 element 的 之前聚焦的元素 设置为 null。

13. 令 originallyFocusedElement 为 document 的 文档的聚焦区域 的 DOM 锚点。

14. 将元素添加到顶层，给定 element。

15. 将 element 的 popover 可见性状态 设置为 显示。

16. 将 element 的 popover 调用者 设置为 invoker。

17. 运行 popover 聚焦步骤，给定 element。

18. 如果 shouldRestoreFocus 为 true 且 element 的 popover 属性不在 无 popover 状态中，则将 element 的 之前聚焦的元素 设置为 originallyFocusedElement。

19. 排队一个 popover 切换事件任务，给定 element、"closed" 和 "open"。

20. 运行 cleanupShowingFlag。

要 排队一个 popover 切换事件任务，给定一个元素 element、一个字符串 oldState 和一个字符串 newState

1. 如果 element 的 popover 切换任务跟踪器 不为 null，则

   1. 将 oldState 设置为 element 的 popover 切换任务跟踪器 的 旧状态。

   2. 从 element 的 popover 切换任务跟踪器 的 任务 中将其从其 任务队列 中删除。

   3. 将 element 的 popover 切换任务跟踪器 设置为 null。

2. 排队一个元素任务，给定 DOM 操作任务源 和 element 以运行以下步骤

   1. 触发一个事件，名为 toggle，在 element 上，使用 ToggleEvent，其中 oldState 属性初始化为 oldState，而 newState 属性初始化为 newState。

   2. 将 element 的 popover 切换任务跟踪器 设置为 null。

3. 将 element 的 popover 切换任务跟踪器 设置为一个结构体，其中 任务 设置为刚刚排队的 任务，旧状态 设置为 oldState。

hidePopover() 方法的步骤是

1. 运行 隐藏 popover 算法，给定 this、true、true 和 true。

要 隐藏 popover，给定一个 HTML 元素 element、一个布尔值 focusPreviousElement、一个布尔值 fireEvents 和一个布尔值 throwExceptions

1. 如果在给定 element、true、throwExceptions 和 null 的情况下运行 检查 popover 有效性 的结果为 false，则返回。

2. 令 document 为 element 的 节点文档。

3. 令 nestedHide 为 element 的 popover 显示或隐藏。

4. 将 element 的 popover 显示或隐藏 设置为 true。

5. 如果 nestedHide 为 true，则将 fireEvents 设置为 false。

6. 令 cleanupSteps 为以下步骤

   1. 如果 nestedHide 为 false，则将 element 的 popover 显示或隐藏 设置为 false。

   2. 如果 element 的 popover 关闭观察器 不为 null，则

      1. 销毁 element 的 popover 关闭观察器。

      2. 将 element 的 popover 关闭观察器 设置为 null。

7. 如果 element 的 popover 属性处于 自动 状态，则

   1. 运行 隐藏所有 popover 直到，给定 element、focusPreviousElement 和 fireEvents。

   2. 如果在给定 element、true 和 throwExceptions 的情况下运行 检查 popover 有效性 的结果为 false，则运行 cleanupSteps 并返回。

      检查 popover 有效性 再次被调用，因为运行 隐藏所有 popover 直到 可能已断开 element 的连接或更改了其 popover 属性。

8. 令 autoPopoverListContainsElement 为 true，如果 document 的 显示自动 popover 列表 的最后一项是 element，否则为 false。

9. 将 element 的 popover 调用者 设置为 null。

10. 如果 fireEvents 为 true

    1. 触发一个事件，名为 beforetoggle，使用 ToggleEvent，其中 oldState 属性初始化为 "open"，而 newState 属性初始化为 "closed"，在 element 上。

    2. 如果 autoPopoverListContainsElement 为 true 且 document 的 显示自动 popover 列表 的最后一项不是 element，则运行 隐藏所有 popover 直到，给定 element、focusPreviousElement 和 false。

    3. 如果在给定 element、true、throwExceptions 和 null 的情况下运行 检查 popover 有效性 的结果为 false，则运行 cleanupSteps 并返回。

       检查 popover 有效性 再次被调用，因为触发 beforetoggle 事件可能已断开 element 的连接或更改了其 popover 属性。

    4. 请求将元素从顶层移除，给定 element。

11. 否则，立即将元素从顶层移除，给定 element。

12. 将 element 的 popover 可见性状态 设置为 隐藏。

13. 如果 fireEvents 为 true，则 排队一个 popover 切换事件任务，给定 element、"open" 和 "closed"。

14. 令 previouslyFocusedElement 为 element 的 之前聚焦的元素。

15. 如果 previouslyFocusedElement 不为 null，则

    1. 将 element 的 之前聚焦的元素 设置为 null。

    2. 如果 focusPreviousElement 为 true 且 document 的 文档的聚焦区域 的 DOM 锚点 是 element 的 阴影包含的包含后代，则运行 previouslyFocusedElement 的 聚焦步骤；执行此步骤时不应滚动视窗。

16. 运行 cleanupSteps。

togglePopover(force) 方法的步骤是

1. 如果 this 的 popover 可见性状态 为 显示，且 force 不存在或为 false，则运行 隐藏 popover 算法，给定 this、true、true 和 true。

2. 否则，如果 force 不存在或为真，则运行给定 显示弹出窗口 this、真和空。

3. 否则

   1. 如果 this 的 弹出窗口可见性状态 为 显示，则令 expectedToBeShowing 为真；否则为假。

   2. 运行给定 expectedToBeShowing、真和空的 检查弹出窗口有效性。

4. 如果 this 的 弹出窗口可见性状态 为 显示，则返回真；否则返回假。

要 隐藏所有弹出窗口直到，给定一个 HTML 元素 或 Document endpoint，一个布尔值 focusPreviousElement 和一个布尔值 fireEvents

1. 如果 endpoint 是一个 HTML 元素 且 endpoint 不在 弹出窗口显示状态 中，则返回。

2. 令 document 为 endpoint 的 节点文档。

3. 令 closeAllOpenPopovers 为执行以下步骤的算法

   1. 令 popover 为 document 的 最顶层自动弹出窗口。

   2. 当 popover 不为空时

      1. 运行给定 popover、focusPreviousElement、fireEvents 和假的 隐藏弹出窗口算法。

      2. 将 popover 设置为 document 的 最顶层自动弹出窗口。

4. 如果 endpoint 是一个 Document，则运行 closeAllOpenPopovers 并返回。

5. 断言：endpoint 的 popover 属性处于 auto 状态。

6. 令 repeatingHide 为假。

7. 至少执行一次以下步骤

   1. 令 lastToHide 为空。

   2. 令 foundEndpoint 为假。

   3. 对于 document 的 显示自动弹出窗口列表 中的每个 popover

      1. 如果 popover 是 endpoint，则将 foundEndpoint 设置为真。

      2. 否则，如果 foundEndpoint 为真，则将 lastToHide 设置为 popover 且 中断。

   4. 如果 foundEndpoint 为假，则运行 closeAllOpenPopovers 并返回。

   5. 当 lastToHide 不为空且 lastToHide 的 弹出窗口可见性状态 为 显示 且 document 的 显示自动弹出窗口列表 不为空时

      1. 运行给定 document 的 显示自动弹出窗口列表 的最后一个元素、focusPreviousElement、fireEvents 和假的 隐藏弹出窗口算法。

   6. 如果 document 的 显示自动弹出窗口列表 包含 endpoint 且 document 的 显示自动弹出窗口列表 的最后一个元素不是 endpoint，则将 repeatingHide 设置为真，否则为假。

   7. 如果 repeatingHide 为真，则将 fireEvents 设置为假。

   并继续执行它们，当 repeatingHide 为真时。

在几种情况下使用 隐藏所有弹出窗口直到算法 来隐藏在事件发生时不会保持打开状态的所有弹出窗口。例如，在弹出窗口的轻微关闭期间，此算法确保我们只关闭与用户点击的节点无关的弹出窗口。

要查找 最顶层弹出窗口祖先，给定一个 Node newPopoverOrTopLayerElement，一个 HTML 元素 或空 invoker，以及一个布尔值 isPopover，执行以下步骤。它们返回一个 HTML 元素 或空。

1. 如果 isPopover 为真

   1. 断言：newPopoverOrTopLayerElement 是一个 HTML 元素。

   2. 断言：newPopoverOrTopLayerElement 的 popover 属性不在 无弹出窗口状态 或 手动 状态中。

   3. 断言：newPopoverOrTopLayerElement 的 弹出窗口可见性状态 不在 弹出窗口显示状态 中。

2. 否则

   1. 断言：invoker 为空。

3. 令 popoverPositions 为一个空的 有序映射。

4. 令 index 为 0。

5. 令 document 为 newPopoverOrTopLayerElement 的 节点文档。

6. 对于 document 的 显示自动弹出窗口列表 中的每个 popover

   1. 设置 popoverPositions[popover] 为 index。

   2. 将 index 增加 1。

7. 如果 isPopover 为真，则 设置 popoverPositions[newPopoverOrTopLayerElement] 为 index。

8. 将 index 增加 1。

9. 令 topmostPopoverAncestor 为空。

10. 令 checkAncestor 为执行以下步骤的算法，给定 candidate

    1. 如果 candidate 为空，则返回。

    2. 令 candidateAncestor 为运行给定 candidate 的 最近包含的打开弹出窗口 的结果。

    3. 如果 candidateAncestor 为空，则返回。

    4. 令 candidatePosition 为 popoverPositions[candidateAncestor]。

    5. 如果 topmostPopoverAncestor 为空或 popoverPositions[topmostPopoverAncestor] 小于 candidatePosition，则将 topmostPopoverAncestor 设置为 candidateAncestor。

11. 运行给定 newPopoverOrTopLayerElement 在 扁平树 中的父节点的 checkAncestor。

12. 运行给定 invoker 的 checkAncestor。

13. 返回 topmostPopoverAncestor。

要查找给定一个 Node node 的 最近包含的打开弹出窗口，执行以下步骤。它们返回一个 HTML 元素 或空。

1. 令 currentNode 为 node。

2. 当 currentNode 不为空时

   1. 如果 currentNode 的 popover 属性处于 auto 状态且 currentNode 的 弹出窗口可见性状态 为 显示，则返回 currentNode。

   2. 将 currentNode 设置为 currentNode 在 扁平树 中的父节点。

3. 返回空。

要 查找最顶层自动弹出窗口，给定一个 Document document，执行以下步骤。它们返回一个 HTML 元素 或空。

1. 如果 document 的 显示自动弹出窗口列表 不为空，则返回 document 的 显示自动弹出窗口列表 的最后一个元素。

2. 返回空。

要执行 弹出窗口聚焦步骤，针对一个 HTML 元素 subject

1. 如果 subject 是一个 dialog 元素，则运行给定 subject 的 对话框聚焦步骤 并返回。

2. 如果 subject 具有 autofocus 属性，则令 control 为 subject。

3. 否则，令 control 为给定“other”的 subject 的 自动聚焦委托。

4. 如果 control 为空，则返回。

5. 运行给定 control 的 聚焦步骤。

6. 令 topDocument 为 control 的 节点文档 的 浏览上下文 的 顶级浏览上下文 的 活动文档。

7. 如果 control 的 节点文档 的 来源 与 topDocument 的 来源 不 相同，则返回。

8. 空 topDocument 的 自动聚焦候选。

9. 将 topDocument 的 自动聚焦处理标志 设置为 true。

要 检查弹出框有效性，对于给定布尔值 expectedToBeShowing、布尔值 throwExceptions 和 文档 或 null 的 expectedDocument 的 HTML 元素 element，执行以下步骤。它们将抛出异常或返回布尔值。

1. 如果 element 的 弹出框 属性处于 无弹出框 状态，则

   1. 如果 throwExceptions 为 true，则抛出 "NotSupportedError" DOM 异常。

   2. 返回 false。

2. 如果以下任何一项为真

   • expectedToBeShowing 为 true 且 element 的 弹出框可见性状态 不是 显示；或

   • expectedToBeShowing 为 false 且 element 的 弹出框可见性状态 不是 隐藏，

   则返回 false。

3. 如果以下任何一项为真

   • element 不 已连接；

   • expectedDocument 不为 null 且 element 的 节点文档 不是 expectedDocument；

   • element 是一个 对话框 元素，其 是否为模态 标志设置为 true；或

   • element 的 全屏标志 已设置，

   则

   1. 如果 throwExceptions 为 true，则抛出 "InvalidStateError" DOM 异常。

   2. 返回 false。

4. 返回 true。

要获取 显示自动弹出框列表，对于 文档 document

1. 令 popovers 为 « »。

2. 对于每个 元素 element，在 document 的 顶层 中：如果 element 的 弹出框 属性处于 自动状态 且 element 的 弹出框可见性状态 为 显示，则 追加 element 到 popovers 中。

3. 返回 popovers。

6.12.1 弹出框目标属性

按钮 可能具有以下内容属性

• popovertarget

• popovertargetaction

如果指定，popovertarget 属性值必须是具有 弹出框 属性的元素的 ID，该元素与具有 popovertarget 属性的 按钮 位于同一 树 中。

popovertargetaction 属性是一个 枚举属性，具有以下关键字和状态

属性的 缺失值默认值 和 无效值默认值 均为 toggle 状态。

尽可能确保弹出框元素放置在 DOM 中其触发元素的紧后位置。这样做将有助于确保弹出框以辅助技术的使用者（例如屏幕阅读器）的逻辑编程读取顺序显示。

<button popovertarget="foo" popovertargetaction="show">
  Show a popover
</button>

<article popover="auto" id="foo">
  This is a popover article!
  <button popovertarget="foo" popovertargetaction="hide">Close</button>
</article>

<input type="button" popovertarget="foo" value="Toggle the popover">

<div popover=manual id="foo">
  This is a popover!
</div>

interface mixin PopoverInvokerElement {
  [CEReactions] attribute Element? popoverTargetElement;
  [CEReactions] attribute DOMString popoverTargetAction;
};

popoverTargetElement IDL 属性必须 反映 popovertarget 属性。

popoverTargetAction IDL 属性必须 反映 popovertargetaction 属性，仅限于已知的值。

要运行 弹出框目标属性激活行为，对于给定的 节点 node

1. 令 popover 为 node 的 弹出框目标元素。

2. 如果 popover 为 null，则返回。

3. 如果 node 的 popovertargetaction 属性处于 show 状态 且 popover 的 弹出框可见性状态 为 显示，则返回。

4. 如果 node 的 popovertargetaction 属性处于 hide 状态 且 popover 的 弹出框可见性状态 为 隐藏，则返回。

5. 如果 popover 的 弹出框可见性状态 为 显示，则运行 隐藏弹出框算法，对于给定的 popover、true、true 和 false。

6. 否则，如果 popover 的 弹出框可见性状态 为 隐藏 且运行 检查弹出框有效性 的结果（对于给定的 popover、false、false 和 null）为 true，则运行 显示弹出框，对于给定的 popover、false 和 node。

要获取给定 节点 node 的 弹出框目标元素，执行以下步骤。它们将返回 HTML 元素 或 null。

1. 如果 node 不是 按钮，则返回 null。

2. 如果 node 已禁用，则返回 null。

3. 如果 node 具有 表单所有者 且 node 是 提交按钮，则返回 null。

4. 令 popoverElement 为运行 node 的 获取 popovertarget 关联元素 的结果。

5. 如果 popoverElement 为 null，则返回 null。

6. 如果 popoverElement 的 弹出框 属性处于 无弹出框 状态，则返回 null。

7. 返回 popoverElement。

6.12.2 弹出框淡出

"淡出" 意味着点击 弹出框 属性处于 自动 状态的弹出框外部将关闭弹出框。这除了此类弹出框如何响应 关闭请求 外。

要 淡出打开的弹出框，对于给定的 事件 event

1. 断言：event 的 isTrusted 属性为 true。

2. 令 target 为 event 的 目标。

3. 令 document 为 target 的 节点文档。

4. 令 topmostPopover 为运行 最顶层的自动弹出框 的结果，对于给定的 document。

5. 如果 topmostPopover 为 null，则返回。

6. 如果 event 是一个 PointerEvent 且 event 的 类型 为 "pointerdown"，则：将 document 的 弹出框 pointerdown 目标 设置为运行 最顶层点击的弹出框 的结果，对于给定的 target。

7. 如果 event 是一个 PointerEvent 并且 event 的 type 是 "pointerup"，则

   1. 令 ancestor 为给定 target 运行 最顶层点击的弹出框 的结果。

   2. 如果 ancestor 是 document 的 弹出框指针按下目标，则令 sameTarget 为真。

   3. 将 document 的 弹出框指针按下目标 设置为 null。

   4. 如果 ancestor 为 null，则将 ancestor 设置为 document。

   5. 如果 sameTarget 为真，则运行 隐藏所有弹出框直到，给定 ancestor，false 和 true。

轻微关闭打开的弹出框 将由 Pointer Events 规范 调用，当用户点击或触摸页面上的任何位置时。

为了找到 最顶层点击的弹出框，给定一个 Node node

1. 令 clickedPopover 为运行 最近包含的打开的弹出框 给定 node 的结果。

2. 令 invokerPopover 为运行 最近包含的调用者的目标弹出框 给定 node 的结果。

3. 令 getStackPosition 为一个算法，该算法在给定一个 HTML 元素 popover 时执行以下步骤

   1. 令 popoverList 为 popover 的 节点文档 的 显示的自动弹出框列表。

   2. 如果 popover 在 popoverList 中，则返回 popover 在 popoverList 中的索引 + 1。

   3. 返回 0。

4. 如果运行 getStackPosition 给定 clickedPopover 的结果大于运行 getStackPosition 给定 invokerPopover 的结果，则返回 clickedPopover。

5. 返回 invokerPopover。

为了找到 最近包含的调用者的目标弹出框，给定一个 Node node

1. 令 currentNode 为 node。

2. 当 currentNode 不为空时

   1. 令 targetPopover 为 currentNode 的 弹出框目标元素。

   2. 如果 targetPopover 不为 null 并且 targetPopover 的 popover 属性处于 自动 状态，并且 targetPopover 的 弹出框可见性状态 为 显示，则返回 targetPopover。

   3. 将 currentNode 设置为 currentNode 在 扁平树 中的祖先。