一日一技：在网页上如何获取鼠标当前指向的元素
跟产品经理吃烤肉
开发爬虫的同学肯定用过 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 = null
function track_mouse(event){
var elementMouseIsOver = get_current_element(event)
if (elementMouseIsOver === last_element) {
return
}
console.log(elementMouseIsOver)
last_element = elementMouseIsOver
}
我们在 Chrome 的控制台运行看看效果：
这样直接打印元素可能不太好查看，我们再加个元素边框的功能。增加两个函数：
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
}
运行效果如下面的动图所示。
有了这个功能以后，只要我们再稍稍修改一下代码，就可以实现自动获取鼠标指向位置的 XPath 了。有兴趣的同学请留言，我继续写。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-10-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
