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

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

摄影:产品经理跟产品经理吃烤肉

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

目录
相关文章
|
JavaScript 前端开发 Python
一日一技:Selenium 如何获取鼠标指向的元素?
一日一技:Selenium 如何获取鼠标指向的元素?
453 0
一日一技:Selenium 如何获取鼠标指向的元素?
|
Web App开发 前端开发 Java
让页面中的元素在网页最底部的代码片段
代码片段内容: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <title>欢迎页面</title> <meta http-equiv="Co
1222 0
|
Web App开发 JavaScript
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
原文:JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置 日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法。
1494 0
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
|
JSON JavaScript 定位技术
在网页中插入百度地图(实例)
步骤 1 2 3   如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置。(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用) 切换城市,搜索需标注位置。
1441 0
Axure RP 9查找属性栏位置简单步骤(以文本框举例)
Axure RP 9查找属性栏位置简单步骤(以文本框举例)
2363 0
Axure RP 9查找属性栏位置简单步骤(以文本框举例)
|
9月前
定位网页元素
定位网页元素

热门文章

最新文章