AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-07-02 39
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端 CSS 经典：鼠标位置信息

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

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

1. pageX

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

2. clientX

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

3. offsetX

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

4. movementX

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

文章标签：
前端开发
关键词：
前端信息
CSS前端
CSS鼠标
前端css
前端鼠标
yqcoder
目录
相关文章
想飞的雪糕
|
13天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错（一）：报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array]，让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题，特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验，并以一个Vue3+TypeScript项目的构建失败为例，详细解析了如何从错误信息中定位问题，最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性，并鼓励读者遇到类似问题时不要慌张，耐心分析。
想飞的雪糕
33 5
邹荣乐
|
14天前
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
90 1
六卿
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
24 3
前端基础(五)_CSS文本文字属性、背景颜色属性
六卿
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性：层叠性、继承性和优先级，并通过实例演示了样式冲突、叠加和选择器优先级的应用。
六卿
23 2
前端基础(九)_CSS的三大特征
有路有乔-六月
|
25天前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
36 3
G0518
|
25天前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
39 2
Hoshiᅟᅠ
|
28天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）3
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
14 1
Hoshiᅟᅠ
|
28天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）2
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
22 1
Hoshiᅟᅠ
|
28天前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍（上篇）1
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
17 1
六卿
|
2月前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位，包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用，解释了它们各自的特点和使用场景。例如，em和rem单位与字体大小相关，百分比单位与父元素的尺寸相关，而vw和vh单位则与浏览器视窗的宽度和高度相关。
六卿
22 1

热门文章

最新文章

  • 1
    puppet使用 apache passsenger 作为前端 (centos)
  • 2
    使用篇-基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源
  • 3
    多个前端项目中公共组件使用方案（npm包方式）
  • 4
    前端 时间个性化 插件 jquery.timeago.js
  • 5
    前端分页插件pagination
  • 6
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 7
    前端项目实战柒拾贰react-admin+material ui-踩坑-List需要Datagrid中isRowSelectable设置写法
  • 8
    前端hook项目pc总结笔记-postgrest方法拼接扩展
  • 9
    Serverless 服务中的前端解决方案—— Serverless 的小程序开发
  • 10
    前端培训-初级阶段-xss相关
  • 1
    彻底学会CSS grid网格布局
    83
  • 2
    CSS——如何取消a链接点击时的背景颜色
    82
  • 3
    DIV+CSS网页布局
    57
  • 4
    Bootstrap的CSS组件
    64
  • 5
    css实现一级下拉菜单
    42
  • 6
    当当网新用户注册界面——CSS代码
    48
  • 7
    当当网头部和尾部——CSS源码
    45
  • 8
    当当网上书店购物车——CSS源码
    68
  • 9
    当当网首页——CSS代码
    36
  • 10
    购物车的功能——CSS源码
    35

    • 相关课程

    更多
  • CSS 快速掌握
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础1：前端开发环境的安装和配置
  • CSS基础教程
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月