如何监控Chrome中的焦点事件? [英] How can I monitor focus events in Chrome?

问题描述

我正在尝试跟踪哪个元素在Web应用程序中获得了关注.我遇到了 monitorEvents API ，但在control或focus事件中使用它时遇到困难. body上的其他事件正在按预期方式工作，但control事件却无法正常工作.有什么建议吗?

I'm trying to track which element gets focus in a web app. I came across the monitorEvents API, but I'm having difficulty using it for control or focus events. Other events on body are working as expected, but not the control events. Any advice?

推荐答案

我今天试图监视焦点和模糊整个文档上的事件. 当使用monitorEvents(document.body, 'control')时，我只会在完全离开选项卡然后重新聚焦时看到触发的事件.我相信正在发生的事情是，一旦您专注于身体，当您专注于子元素时，它就不会改变，因为侦听器处于高水平，并且事件会一直扩散到身体，而焦点不会改变.

I was trying to monitor focus and blur events on the entire document today. When using monitorEvents(document.body, 'control') I would only see the event fired when I left the tab entirely and then refocused. I believe what's happening is that once you're focused on the body, it'll never change when you focus on child elements since the listener is at a high level and the events just bubble up to the body with no change in focus.

我尝试监视一些特定子元素上的事件，并发现这些事件触发了我的预期.因此，我决定将事件侦听器添加到文档中的每个元素，并且效果很好.这是一线的.

I tried monitoring events on a few specific child elements and saw that those triggered how I expected. So I decided to add an event listener to each element in the document and that worked well. Here's the one-liner for that.

document.querySelectorAll("*").forEach((el)=> monitorEvents(el, 'control'))

这篇关于如何监控Chrome中的焦点事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！