获取元素鼠标当前指向启用 Chrome 开发者工具答案

【问题标题】：Fetch element mouse is currently pointing to with Chrome developer tools enabled获取元素鼠标当前指向启用 Chrome 开发者工具
【发布时间】：2015-02-21 18:10:57
【问题描述】：

我正在寻找通过 Javascript 右键单击“检查元素”时被选中的元素。

由于当我们在“检查”模式下移动鼠标时，所选区域会显示在 UI 上的同一网页中并通过鼠标移动进行修改，我假设它应该可以通过 js 访问。

一个可行的解决方案是在所有 DOM 元素上添加 mouseover 事件并使用它来获取鼠标悬停的当前元素。但如果 Chrome 开发者工具已经在做类似的事情，我想用它来获取元素，而不是对页面上的每个元素应用 eventlisteners。

基本上我正在考虑打电话：

inspect(document.body);

然后通过js动态获取鼠标悬停在上面的元素。但我不确定如何访问它，甚至可能。

【问题讨论】：

标签： javascript google-chrome google-chrome-devtools dom-events

【解决方案1】：

事件冒泡，所以它只需要一个事件监听器在文档上。 target 将是最具体的朝着最不具体的方向发展。

document.body.addEventListener('click', function(e) {
  console.log(e.target.id);
})

http://jsbin.com/wipinahopi/1/edit?js,console,output

【讨论】：