预期:DOM突出显示消失。
实际:DOM高亮显示卡住了。
一种更简单的触发方式:
现在,高亮显示将“粘住”,直到您专注于DevTools中的其他内容为止。
TBH在我心中这是预期的行为,因为只要悬停或聚焦本机元素,它就与浏览器的“元素”面板的行为匹配。 1个
如果愿意,我们可以在几秒钟后通过更新Tree
...启用自动隐藏功能。
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223
...也像SelectedElement
一样传递hideAfterTimeout: true
...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89
1两者之间的一个小但可能重要的区别是,本机元素面板似乎没有将“卡住”的突出显示留在鼠标上。 也许更可靠地检测鼠标是否离开了整个开发人员工具的界限? 也许我们可以更好地做到这一点?
因为突出显示不会停留在Firefox上,所以它在Firefox和Chrome之间的预期行为是否不一致。
两者之间的一个小但可能重要的区别是,本机元素面板似乎没有在鼠标上留下“卡住”的突出显示。
我不确定我是否理解-这正是我提出的问题。 :-)是的,我认为这是一个重要的区别。 我每天都在碰这个问题。
...还传递hideAfterTimeout:true就像SelectedElement一样...
听起来好像几秒钟后总是会删除高亮显示。 因此它将解决此问题,但会使其他情况更糟。 这对我来说似乎不是一个可以接受的解决方案。
理想情况下,当我将光标放在DevTools之外的那一刻,
我了解有些情况,例如“如果我继续使用键盘该怎么办”,但我并不是一直都在打。 相比之下,我打这个特定的错误(鼠标移开时不一致复位高亮)每天都有很多次。
我在这里呆了半个小时,对于事件为何不触发,我什至没有一个遥远的想法。 让我们问一下推特。 https://twitter.com/dan_abramov/status/1222178476817633282
我在Twitter上提到了这一点,但我浏览了devtools的源代码,以了解它们如何处理鼠标移动并突出显示DOM元素。
看起来devtools更新其悬停状态的主要位置是在_onmousemove处理程序中。 该函数依次调用_highlightTreeElement ,有趣的是,其他任何事件处理程序均未引用
其他一些方法( _onfocusout
, _onmouseleave
, _ondragstart
和_reset
)调用SDK.OverlayModel.hideDOMNodeHighlight()
,顾名思义,该方法将删除从主页突出显示。
编辑:忘记提及我想调出不同的事件处理程序集,因为itemData的当前实现目前似乎绑定到onMouseMove
和onMouseLeave
。 devtools观察到的额外事件可能还会使事情变得更稳健,如果您拖累或更关注焦点更改处理。
最有用的评论
我在Twitter上提到了这一点,但我浏览了devtools的源代码,以了解它们如何处理鼠标移动并突出显示DOM元素。
看起来devtools更新其悬停状态的主要位置是在_onmousemove处理程序中。 该函数依次调用_highlightTreeElement ,有趣的是,其他任何事件处理程序均未引用
其他一些方法(
_onfocusout
,_onmouseleave
,_ondragstart
和_reset
)调用SDK.OverlayModel.hideDOMNodeHighlight()
,顾名思义,该方法将删除从主页突出显示。编辑:忘记提及我想调出不同的事件处理程序集,因为itemData的当前实现目前似乎绑定到
onMouseMove
和onMouseLeave
。 devtools观察到的额外事件可能还会使事情变得更稳健,如果您拖累或更关注焦点更改处理。