如何实现类似chrome审查元素的效果

荔枝冰可乐
  • 3
新手上路,请多包涵

如何实现类似chrome审查元素的效果

想实现全局监听鼠标浮动事件,鼠标悬浮元素高亮,
鼠标点击元素时获取被点击元素的标签或者xpath,请问如何实现?
回复
阅读 2.7k
4 个回答

css + js 来实现

荔枝冰可乐
  • 3
新手上路,请多包涵

解决了,我简单说一下,给监听区域绑定addEventListener能够获取到点击的dom元素,根据点击元素距离顶部的距离以及滚动的距离计算位置高亮显示。

我刚好也有这个需求,发现两种思路:

  1. 监听mousemove事件,事件的path属性是一个集合,就是当前鼠标位置下的元素,path[0]就可以拿到想要的元素
  2. document.elementFromPoint(x,y);可以得到x,y坐标的元素。

只在chrome浏览器测试过

宣传栏