在网页上如何获取鼠标当前指向的元素-泓源视野

在网页上如何获取鼠标当前指向的元素

跟产品经理吃烤肉

开发爬虫的同学肯定用过 Chrome 开发者工具自动定位页面元素对应的 HTML 标签的功能,如下图所示:

在网页上如何获取鼠标当前指向的元素插图

;那么有没有同学思考过,这个功能,如果用 JavaScript 怎么实现呢?

显然,随着鼠标的移动,鼠标指向的页面元素是不断变化的,我们需要知道鼠标当前指向了哪一个页面元素。

在 JavaScript 中,有一个函数叫做document.elementFromPoint(x, y),输入页面坐标,返回该坐标上的页面元素。而坐标可以通过鼠标的事件来获得。

于是,我们可以写出如下的 JavaScript 代码:

 function get_current_element(event){ var x = event.clientX, y = event.clientY, element = document.elementFromPoint(x, y); return element }function track_mouse(event){ var elementMouseIsOver = get_current_element(event) console.log('当前鼠标指向的元素是:', elementMouseIsOver) }window.onmousemove = track_mouse

这样,当鼠标移动时,可以实时获得当前鼠标指向的元素。

但是,如果你直接使用上面的代码,那么你会被打印出来的信息刷屏,因为鼠标一旦移动就会有数据打印出来。所以我们需要做一个限制,当鼠标在元素内部移动的时候,不打印数据。track_mouse修改为:

var last_element = nullfunction track_mouse(event){ var elementMouseIsOver = get_current_element(event) if (elementMouseIsOver === last_element) { return } console.log(elementMouseIsOver) last_element = elementMouseIsOver }

我们在 Chrome 的控制台运行看看效果:

在网页上如何获取鼠标当前指向的元素插图1

;

这样直接打印元素可能不太好查看,我们再加个元素边框的功能。增加两个函数:

function highlight(element){ element.style.outline = '#f00 solid 2px' }function remove_hightlight(element){ element.style.removeProperty('outline') }

修改track_mouse代码为:

function track_mouse(event){ var elementMouseIsOver = get_current_element(event) if (elementMouseIsOver === last_element) { return } if (last_element != null) { remove_hightlight(last_element) } highlight(elementMouseIsOver) last_element = elementMouseIsOver }

运行效果如下面的动图所示。

在网页上如何获取鼠标当前指向的元素插图2

;

有了这个功能以后,只要我们再稍稍修改一下代码,就可以实现自动获取鼠标指向位置的 XPath 了。有兴趣的同学请留言,我继续写。

文章分享自微信公众号:泓源视野网络安全
本文由 泓源视野 作者:admin 发表,其版权均为 泓源视野 所有,文章内容系作者个人观点,不代表 泓源视野 对观点赞同或支持。如需转载,请注明文章来源。
5

发表评论

Protected with IP Blacklist CloudIP Blacklist Cloud
您是第8235339 位访客, 您的IP是:[34.239.154.240]