Web可视化视图圈选思路？

Question

最近要做可视化的工具（埋点），第一步需要实现类似代码审查（Firefox里的查看器，chrome里的element）的效果，即通过挪动鼠标悬浮在要选择的元素上时，获取该元素的信息。

但是网上有关这方面的信息实在是太少了，希望得到一些提示！

Answer 1

1、鼠标悬浮，即hover事件
2、获取元素信息，即常规的DOM的get操作
3、展示元素信息，即get之后DOM的创建、写入操作，例如：悬浮框（类Tooltips） or 固定的展示区

Answer 2

我想用的就是游戏的碰撞检测原理。 在浏览器之上的抽象层，我们是看不到像素和坐标的，那么如果是页面的一个元素，例如按钮， 鼠标移动上去时怎么确定是不是在这个按钮上呢？ 必然在底层有坐标检测的。这个可能就设计到底层的东西了。 浏览器的window对象有方法可以显示鼠标的像素，这是怎么做到的呢？我觉得这个是突破口。查看器可能用到是另一个对象

Answer 3

现在发现使用mouseover和mousemove事件比较合适。用js遍历所有节点（或者需求的类型节点）并加上mouseover等事件。