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

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

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

css + js 来实现

新手上路,请多包涵

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

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

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

只在chrome浏览器测试过

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题