监听PointerEnter/Leave 动态创建的dom 元素, 有什么办法 可以检视吗(鼠标一动就消失了)?

Question

https://codesandbox.io/s/fgkc9t

上面这个代码示例 是 React doc中 的一个demo
https://zh-hans.react.dev/reference/react/useLayoutEffect#usage

问题的背景是:
在不修改任何项目的代码的情况下( 也就是假设你没有代码权限), TooltipContainer 组件中的 dom节点 是通过监听 pointerEnter动态创建的, 当pointerLeve的时候 由于下面的代码中的 targetRect !== null 为false, 导致dom节点本身没有被创建.

  {targetRect !== null && (
        <Tooltip targetRect={targetRect}>
          {tooltipContent}
        </Tooltip>
      )
    }

现在的 问题是 : 我想F12 检视 TooltipContainer 中的div dom节点. 但是这个节点 只有在 pointerEnter的时候才创建, 鼠标一旦pointerLeave 就没有了, 所有有什么办法可以 检视这个dom元素吗?

Answer 1

在控制台输入：

setTimeout(() => { debugger }, 2000)

将鼠标移到按钮上方触发 pointerEnter 事件，等待 2 秒钟

Answer 2

不知道OP你用的是什么浏览器，我用FF比较多，直接在元素上右键检查元素，找到对应元素，然后往上找父级元素的 event 事件绑定，会显示有 event 这样的一个 Tag，点开找到对应的事件取消对应的事件勾选就好了。

---

EDIT

看了一下 Chrome 中需要这么操作。检视对应元素中选择 Event Listeners 面板，找到对应的事件绑定点击展开，移除对应的事件监听绑定。

---

如果实在不太知道是什么事件触发的话，用一楼的方式也可以。

其实之前社区里面也有过类似的问答，发问题的时候应该有相关推荐的。
👉 F12检视一个元素的时候，鼠标一动 这个元素就会消失，那么如何定位到这个元素的html源码位置？