专栏首页未闻Code一日一技:在网页上如何获取鼠标当前指向的元素

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

摄影:产品经理

跟产品经理吃烤肉

开发爬虫的同学肯定用过 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 了。有兴趣的同学请留言,我继续写。

本文分享自微信公众号 - 未闻Code(itskingname),作者:kingname

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一日一技:更友好的格式化数据提取方案

    在工作中,我们开发的系统会涉及到大量的日志。同时,我们还有另一套系统会对日志的内容进行监控,从而判断系统是否正常运作。

    青南
  • 一日一技:单机单节点 MongoDB 为什么删除数据后不释放空间?

    MongoDB 3.6以后,默认使用的储存引擎是 WiredTiger。这个引擎有一个特点,就是删除数据不释放空间。例如现在你的一个集合里面有10000000条...

    青南
  • 一日一技:在Python中创建临时文件用于记录临时数据

    当我们在做数据分析的时候,可能会由于数据量过大导致内存不足。如果我们没有条件使用更高配置的电脑,也没有办法优化数据,那么我们可以先把计算的中间值存放在一个文本文...

    青南
  • 市场嗅觉是可以培养的技能吗?

    用户1682855
  • Python教你挑选礼物

    又到了一年一度的教师节,每次教师节大家都会烦恼不知道送什么礼物?尤其是对于理工男来说,更是一个让人头大的问题。我今天就和大家分享一个用Python爬取商品信息的...

    stormwen
  • 带着老李折腾山寨Workerman(四)

    昨天晚上做梦梦到了栋子,就想起我俩那会儿一起摸鱼的时光。那还是五年前在[ 黑 ]鹭引擎的时候,我俩被人称为公司两大门神,具体表现在于基本一整个白天都在公司门口歇...

    老李秀
  • 深度 | 深度学习应该使用复数吗?

    选自Medium 机器之心编译 参与:Nurhachu Nul、路雪 深度学习只能使用实数吗?本文简要介绍了近期一些将复数应用于深度学习的若干研究,并指出使用复...

    机器之心
  • 塔秘 | 深度学习应该使用复数吗?

    导 读 深度学习只能使用实数吗?本文简要介绍了近期一些将复数应用于深度学习的若干研究,并指出使用复数可以实现更鲁棒的层间梯度信息传播、更高的记忆容量、更准确的...

    灯塔大数据
  • 为了追到小姐姐,我用 Python 制作了一个机器人

    最近发现有一个微信好友,我的每一条朋友圈动态,无论什么时候发布,发布的什么内容,点赞列表总有它的身影。

    AirPython
  • HTML常用文本标记,超级链接和路径描述

    在body标记里写的文本内容会直接显示在页面上,但是这样直接写文本内容的方式不太好。我们在html里写文本内容的时候尽量使用标记套住内容,类似于声明这是一个文本...

    端碗吹水

扫码关注云+社区

领取腾讯云代金券