前端 CSS 经典:鼠标位置信息

前言:当监听鼠标事件时,需要了解鼠标属性所代表的位置信息

dom.addEventListener("click", (e) => {e.pageX;e.clientX;e.offsetX;e.movementX;
});

1. pageX

表示鼠标距离整个页面左边缘的距离,就算有滚动条,最左边看不到了,也是到那边的距离。

2. clientX

表示鼠标相对于视口左边的距离,视口就是能看见的地方。

3. offsetX

表示鼠标距离事件源左边缘的距离

4. movementX

表示这一次鼠标事件距离上一次鼠标事件横向上的偏移量

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构与算法-【算法专项】Hash算法-1(散列表+散列函数+Hash冲突解决办法)

数据结构与算法-Hash算法-1 1 前置2 散列表3 散列函数4 Hash冲突4.1 开放寻址&#xff1a;4.2 链路地址 在这里插入图片描述 1 前置 给你N&#xff08;1<N<10&#xff09;个自然数,每个数的范围为&#xff08;1~100&#xff09;。现在让你以最快的速度判断某一个数是否…

怎样选择合适的O型密封圈?

O型密封圈在机械和工业应用中起到至关重要的密封作用。选择合适的O型密封圈不仅能提高设备的运行效率&#xff0c;还能延长其使用寿命。本文将从多个角度详细介绍如何选择适合不同应用场景的O型密封圈。 1、识别操作条件 温度范围&#xff1a;不同材料的O型密封圈在不同温度下…

LabVIEW电机故障监测系统

电机作为工业生产中的关键设备&#xff0c;其故障会导致生产停滞和经济损失。因此&#xff0c;开发一个能实时监控电机状态并预测潜在故障的系统具有重要意义。通过高效的数据采集和分析技术&#xff0c;提升故障诊断的准确性和及时性。 系统组成 该系统由以下部分组成&#…

分布式系统_跨域问题

跨域&#xff1a;域名不一致就是跨域&#xff0c;主要包括&#xff1a; 域名不同&#xff1a; www.taobao.com 和 www.taobao.org 和 www.jd.com 和 miaosha.jd.com 域名相同&#xff0c;端口不同&#xff1a;localhost:8080和localhost:8081 跨域问题&#xff1a;浏览器禁止…

Eureka区域感知路由:优化微服务架构的地理感知负载均衡

Eureka是Netflix开源的服务发现框架&#xff0c;它是Spring Cloud体系中的核心组件之一。在构建分布式系统和微服务架构时&#xff0c;服务发现是确保不同服务实例能够相互通信的关键机制。Eureka区域感知路由&#xff08;Zone-Aware Routing&#xff09;是Eureka中一个重要的特…

目标跟踪——KCF源码用python实现

from numpy.fft import fft2, ifft2, fftshift import cv2 import numpy as npclass HOG:def __init__(self, winSize):""":param winSize: 检测窗口的大小"""self.winSize winSizeself.blockSize (8, 8)self.blockStride (4, 4)self.cellSiz…

vue3 运用高德地图 自定义弹框 为信息窗体 添加 new AMaps.value.InfoWindow 添加事件

效果图 划过散点的时候出现每个三点位置的数据提示 点击具体散点获取展示信息弹框&#xff0c;并为其添加点击事件 注意点&#xff1a; 1 即使是用的vue&#xff0c;也不能使用click为窗体添加点击事件&#xff0c;需要使用onclick&#xff0c; &#xff08;原因&#xff1a…

TMC2209驱动模式详解

TMC2209驱动模式详解 1.TMC2209封装2.TMC2209引脚定义 1.TMC2209封装 2.TMC2209引脚定义

雅思词汇及发音积累 2024.6.24

delve /delv/ vi.钻研&#xff1b;探究&#xff1b;挖 elicit /ɪˈlɪsɪt/ v.引出&#xff0c;得到&#xff1b;<古>使&#xff08;潜在的东西&#xff09;显现&#xff0c;诱出 regent /ˈriːdʒənt/ n.摄政王&#xff1b;摄政者&#xff1b;州立大学董事会董事…

TailwindCss Vue3 Vite4 安装配置

TailwindCss Vue3 Vite4 安装配置 官方文档 环境 Vue3 Vite4 步骤 1. 创建项目 如果已经有项目&#xff0c;不需要这个步骤 npm create vitelatest my-project -- --template vue cd my-project2. 安装TailwindCss 安装 tailwindcss 和同级的依赖&#xff0c;创建tailw…

JavaWeb系列十五: JavaWeb三大组件之过滤器Filter

老韩-JavaWeb三大组件之过滤器Filter 过滤器说明过滤器基本原理过滤器分析和实例url-patternFilter生命周期FilterConfigFilterConfig应用实例过滤器链基本原理分析过滤链实例演示过滤链注意事项 过滤器作业布置 过滤器说明 过滤器说明 Filter 过滤器是JavaWeb三大组件之一(Se…

Android AOSP 编译并烧录到Google Pixel4XL

简介 AOSP&#xff08;Android Open Source Project&#xff09;是Android系统的开源版本&#xff0c;任何人都可以下载、编译和修改。手头上有一台Pixel 4XL&#xff0c;尝试编译AOSP并将其烧录到的设备上。 准备工作 在开始之前&#xff0c;您需要确保您的电脑满足以下条件…

实验08 软件设计模式及应用

目录 实验目的实验内容一、能播放各种声音的软件产品Sound.javaDog.javaViolin.javaSimulator.javaApplication.java运行结果 二、简单工厂模式--女娲造人。Human.javaWhiteHuman.javaYellowHuman.javaBlackHuman.javaHumanFactory.javaNvWa.java运行结果 三、工厂方法模式--女…

Python爬虫项目集:豆瓣电影排行榜top250

关于整理日常练习的一些爬虫小练习&#xff0c;可用作学习使用。 爬取项目以学习为主&#xff0c;尽可能使用更多的模块进行练习&#xff0c;而不是最优解。 爬虫概要 示例python 库爬取模块request解析模块BeautifulSoup存储类型list&#xff08;方便存入数据库&#xff09…

2024年最新 Windows 操作系统安装部署 MongoDB 数据库详细教程(更新中)

MongoDB 概述 MongoDB 是一个基于分布式文件存储的开源数据库系统&#xff0c;由C语言编写&#xff0c;旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系…

数据库SqlServer笔试题

相关面试题 redis安装说明书 http://t.csdnimg.cn/iM260 单体并发瓶颈 redis sqlsever mysql多少 http://t.csdnimg.cn/DTXIh Redis高频面试题http://t.csdnimg.cn/FDOnv 数据库SqlServer笔试题 数据库SqlServer笔试题-CSDN博客 SQL 大数据查询如何进行优化&#xff1f;sqlser…

深入探索:Spring JdbcTemplate的数据库访问之歌

介绍 在当今的企业应用程序开发中&#xff0c;与数据库进行交互是至关重要的一环。Spring框架为我们提供了多种方式来简化数据库访问&#xff0c;其中之一就是Spring JdbcTemplate。 Spring JdbcTemplate是Spring框架中的一个核心模块&#xff0c;它提供了一种优雅的方式来使…

使用mysql的binlog进行数据恢复

1.mysql安装环境 在你本地电脑windows上建一个和生产环境一样的mysql版本 我的是 mysql5.7.43 安装教程可以自行上网搜&#xff08;这里不做介绍&#xff09; 可参考&#xff1a; 1.1安装路径 我的mysql安装路径&#xff1a; D:\mysql\mysql-5.7.43-winx64\bin * 1.2my.in…

Docker部署私有仓库(registryHarbor)

简介Docker Hub 官方仓库 在 Docker 中&#xff0c;当我们执行 docker pull xxx 的时候 &#xff0c;它实际上是从 registry.hub.docker.com 这个地址去查找&#xff0c;这就是Docker公司为我们提供的公共仓库。在工作中&#xff0c;我们不可能把企业项目push到公有仓库进行管理…

并查集 Rank 的优化

并查集 Rank 的优化 并查集是一种数据结构,用于处理一些不交集的合并及查询问题。它支持两种操作:查找(Find)和合并(Union)。查找操作用于确定某个元素属于哪个子集,而合并操作用于将两个子集合并成一个集合。在并查集中,每个子集用一棵树来表示,树根的元素作为该子集…