获取元素鼠标当前指向启用 Chrome 开发人员工具

Question

I am looking to fetch the element which gets selected when we right click on "Inspect Element" through Javascript.

Since when we move mouse around with "Inspect" mode on, the area selected is displayed within the same web page on UI and gets modified by mouse movement, I am assuming that it should be accessible through js.

One working solution would be to add mouseover event on all the DOM elements & use it to get the current element mouse is hovering to. But if Chrome developer tools already is doing something similar, I'd like to use it to get the element, instead of applying eventlisteners to each element on page.

Basically I'm thinking of calling:

inspect(document.body);

and then dynamically get the element mouse is hovering on through js. But I'm not sure how to access it or is it even possible.

Answer 1

Events bubble up, so it'd only take one event listener on the document. The target will be the most specific going towards least specific.

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

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