JS鼠标事件总结学习

首先我们先简单过一遍鼠标MouseEvent事件:

  1. click: 当鼠标单击元素时触发。
  2. dblclick: 当鼠标双击元素时触发。
  3. mousedown: 当按下鼠标按钮时触发。
  4. mouseup: 当释放鼠标按钮时触发。
  5. mousemove: 当鼠标指针在元素上移动时触发。
  6. mouseover: 当鼠标指针移动到元素上方时触发。
  7. mouseout: 当鼠标指针移出元素时触发。
  8. contextmenu: 当用户在元素上点击鼠标右键时触发上下文菜单事件。

     执行顺序:mousedown —> mouseup —> click 

鼠标事件中的有很多属性,用于获取鼠标在不同坐标系下的位置信息,包括但不限于:

  • clientX、clientY: 鼠标相对于浏览器窗口客户区域的坐标。
  • offsetX、offsetY: 鼠标相对于触发事件的元素的内边距边界的坐标。
  • layerX、layerY: 鼠标相对于触发事件的元素的边框边界的坐标(已废弃)。
  • pageX、pageY: 鼠标相对于整个页面左上角的坐标。
  • screenX、screenY: 鼠标相对于(电脑)屏幕左上角的坐标。

使用场景:

  • 当需要获取鼠标相对于页面或浏览器窗口的坐标时,可以使用pageX和pageY。
  • 当需要获取鼠标相对于触发事件的元素的坐标时,可以使用clientX和clientY或者offsetX和offsetY。
  • 当需要获取鼠标相对于屏幕的坐标时,可以使用screenX和screenY。

 代码示例:

document.addEventListener('mousemove', function(event) {console.log('pageX: ' + event.pageX + ', pageY: ' + event.pageY);console.log('clientX: ' + event.clientX + ', clientY: ' + event.clientY);console.log('offsetX: ' + event.offsetX + ', offsetY: ' + event.offsetY);console.log('screenX: ' + event.screenX + ', screenY: ' + event.screenY);
});

推荐博文:

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_js event layery-CSDN博客

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

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

相关文章

C++精进之路之路(九)内存模型和名称空间

C鼓励程序员在开发程序时使用多个文件。一种有效的组织策略是,使用头文件来定义用户类型,为操纵用户类型的两数提供两数原型:并将两数定义放在一个独立的源代码文件中。头文件和源代码文代一起定义和实现了用户定义的类型及其使用方式。最后&…

初步认识架构分层

一般初创软件,为快速上线,几乎不考虑分层。但随业务越发复杂,就会导致逻辑复杂、模块相互依赖、代码扩展性差等各种问题。 架构分层迫在眉睫。 1 什么是架构分层? 软件工程中常见的设计方式,将整体系统拆分成N个层次,…

C#进制--2进制、10进制、16进制(Modbus通讯部分)详解

引言:最近接触了一些通讯方面信息,写个小结记录一下,即时更新 1.二进制数: 是计算技术中经常采用的一种数制。二进制数据是由0和1两个基本数码来表示的数。它的基数为2,进位规则是“逢二进一”,借位规则是…

软件测试错题集(黑盒、白盒测试)

所有判断题第二个选项是正确答案 1.[判断题] 不存在质量很高但可靠性很差的产品。 错 对 2.[判断题] 软件测试按照测试过程分类为黑盒、白盒测试。 对 错 3.[判断题] 从软件开发者的角度出发,普遍希望通过软件测试暴露软件中隐藏的错误和缺陷,以考虑用户是否可接受该产品。 …

3D空间漫游技术的日趋成熟,让博物馆数字化大放异彩!

随着科技的飞速发展,互联网已经成为人们生活中不可或缺的一部分。在这个数字化时代,博物馆也紧跟时代潮流,将传统的实体博物馆与现代科技相结合,诞生了一种全新的博物馆形式——3D线上博物馆。这种新型博物馆凭借其独特的魅力&…

Flutter 三点三:Dart Stream

Stream Stream用于接收异步事件Stream 可以接收多个异步事件Stream.listen()方法返回StreamSubscription 可用于取消事件订阅,取消后,不再接收事件 基本使用 Stream.fromFutures([Future.delayed(Duration(seconds: 1),(){return "事件1";})…

SemCms外贸网站商城系统 SQL注入漏洞复现(CVE-2023-50563)

0x01 产品简介 SemCms是国内团队打造的专门针对外贸网站的开源CMS,主要用于外贸企业,兼容IE,Firefox等主流浏览器。建设商城性质的外贸网站,多语言(小语种)网站。 0x02 漏洞概述 SemCms外贸网站商城系统SEMCMS_Function.php 中的 AID 参数存在SQL注入漏洞,未经身份认…

数据库:基础SQL知识+SQL实验2

(1)基础知识: 1.JOIN(连接): 连接操作用于根据指定的条件将两个或多个表中的数据行合并在一起。JOIN 可以根据不同的条件和方式执行,包括等值连接、不等值连接等。 (1&#xff09…

自制Java镜像发布到dockerhub公网使用

文章目录 问题现象解决制作Java镜像发布使用 问题现象 书接上回,上周处理了一个docker问题,写了篇博客:自定义docker镜像,ubuntu安装命令并导出我们使用谷歌的jib插件打包,详情可以参考这篇文章:Spring Bo…

联想M7400加粉后如何清零

联想M7400黑白激光多功能打印一体机加粉后清零方法: 吴中函 加粉后,确保硒鼓已经被正确安装并且机器已经通电。 1、打开前盖,以便进行后续的操作。 2、按下“清除/返回”键,这会触发一个屏幕提示:提示内容为“更换…

ros2 ubuntu 20.04 安装 foxy

设置区域设置 确保您有一个支持UTF-8. 如果您处于最小环境(例如 docker 容器)中,则区域设置可能是最小的,例如POSIX. 我们使用以下设置进行测试。但是,如果您使用不同的 UTF-8 支持的区域设置,应该没问题。…

VM安装虚拟机及初始化操作

一、VM下载及暗转 虚拟机指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统,在实体计算机中能够完成的工作在虚拟机中都能够实现。VMware 是一款功能强大的桌面虚拟计算机软件,提供用户可在单一的桌面上同时运行不同的…

python毕设选题 - flink大数据淘宝用户行为数据实时分析与可视化

文章目录 0 前言1、环境准备1.1 flink 下载相关 jar 包1.2 生成 kafka 数据1.3 开发前的三个小 tip 2、flink-sql 客户端编写运行 sql2.1 创建 kafka 数据源表2.2 指标统计:每小时成交量2.2.1 创建 es 结果表, 存放每小时的成交量2.2.2 执行 sql &#x…

463岛屿周长

题目 给定一个 row x col 的二维网格地图 grid ,其中:grid[i][j] 1 表示陆地, grid[i][j] 0 表示水域。 网格中的格子 水平和垂直 方向相连(对角线方向不相连)。整个网格被水完全包围,但其中恰好有一个…

GreatSQL社区2023全年技术文章总结

GreatSQL社区自成立以来一直致力于为广大的数据库爱好者提供一个交流与学习的平台。在2023年,我们见证了社区的蓬勃发展,见证了众多技术文章的诞生与分享。 此篇总结呈现GreatSQL社区2023年社区技术文章在CSDN发布的全部。这些文章涵盖了GreatSQL、MGR、…

自动驾驶HWP的功能定义

一、功能定义 高速路自动驾驶功能HWP是指在一般畅通高速公路或城市快速路上驾驶员可以放开双手双脚,同时注意力可在较长时间内从驾驶环境中转移,做一些诸如看手机、接电话、看风景等活动,该系统最低工作速度为60kph。 如上两种不同环境和速度…

知识笔记(七十)———tp5中的增删改查(详细)

增 添加多条数据 添加多条数据直接向 Db 类的 insertAll 方法传入需要添加的数据即可 $data [[foo > bar, bar > foo],[foo > bar1, bar > foo1],[foo > bar2, bar > foo2] ]; Db::name(user)->insertAll($data); 助手函数写法 // 添加单条数据 db(…

力扣labuladong一刷day53天LFU 算法

力扣labuladong一刷day53天LFU 算法 一、460. LFU 缓存 题目链接&#xff1a;https://leetcode.cn/problems/lfu-cache/description/ class LFUCache {HashMap<Integer, Integer> ktv;HashMap<Integer, Integer> ktf;HashMap<Integer, LinkedHashSet<Inte…

力扣题:字符串变换-1.5

力扣题-1.5 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;482. 密钥格式化 解题思想&#xff1a;首先先将破折号去除,并将所有字母转换为大写,然后计算第一组的长度,进行结果字符串的拼接,如果第一组的长度为0,则需要删除开头的’-符号 class S…

互联网加竞赛 基于CNN实现谣言检测 - python 深度学习 机器学习

文章目录 1 前言1.1 背景 2 数据集3 实现过程4 CNN网络实现5 模型训练部分6 模型评估7 预测结果8 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于CNN实现谣言检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&am…