鼠标事件中的距离

于 2024-03-17 17:40:01 发布
阅读量360 收藏 8
点赞数 10
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangpb123/article/details/136786057
版权

 event.clientX，event.clientY

鼠标点击时到视口的距离。与页面有无滚动条无关。

event.pageX，event.pageY

鼠标点击时到整个文档边缘的距离。

event.pageX = event.clientX + document.documentElement.scrollLeft。

鼠标事件坐标图解

huangpb0624
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
空间 距离查询
12-25
基于arcgis的二次开发，通过鼠标事件获得地图上相应的面积和距离
jquery计算鼠标和指定元素之间距离的方法
10-24
主要介绍了jquery计算鼠标和指定元素之间距离的方法,涉及jQuery针对页面位置属性与鼠标事件的相关操作技巧,需要的朋友可以参考下
jQuery 鼠标滚轮插件 mousewheel
04-27
1.使用方法很简单，仅仅把mousewheel绑定到指定元素上。示例代码如下： // using on $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); // using the event helper $('#my_elem').mousewheel(function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); 2.它提供了两个很有帮助事件mousewheel和unmousewheel来封装了滚轮的事件：使用方法如下： //绑定mousewheel事件 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); //解除mousewheel事件 $('#my_elem').unmousewheel(fn) 3.阻止事件冒泡，如果只想在某个元素上捕捉事件，而不想冒泡到document上，这样浏览器的滚动条就不会发生滚动了。事件代码如下： //阻止冒泡 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); return false; }); 4.获取滚动的方向,示例代码如下： if (delta > 0) o += ' up (' + delta + ')'; else if (delta 0) o += ' north (' + event.deltaY + ')'; else if (event.deltaY 0) o += ' east (' + event.deltaX + ')'; else if (event.deltaX < 0) o += ' west (' + event.deltaX + ')'; 5.可以通过event.deltaFactor获取滚动的距离，代码如下： $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaFactor); return false; });
获取、过滤QTextEdit滚轮事件，改变滚动行数
10-30
可以改变QTextEdit滚轮每次滚动的距离，利用事件过滤器，获取过滤QTextEdit的滚轮事件，修改每次滚动的距离
c# hook 鼠标键盘事件
06-15
监视鼠标和键盘操作 用C#写的鼠标键盘钩子程序，能够记录每天开机后鼠标滑过的距离和按下的键
QML 鼠标事件
青春不老，奋斗不止！
02-27 1971
QML 中有一些元素本身是不具备交互能力的（例如：Rectangle、Text、Image 等），那么如何通过鼠标来控制它们的行为呢？这里就需要用到 MouseArea 元素了。
鼠标事件中的各种距离和元素的各种宽高
liangtaox8的博客
11-15 1074
元素属性中的各种“距离” 元素属性中的距离有以下6对： scrollLeft: 设置或获取位于对象左边界和窗口中可见内容的最左端之间的距离scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离offsetHeight: 获得对象的可视区域的高度，包括边框offsetWidth: 获得对象的可视区域的宽度，包括边框 clientHeight: 获得对象边框内部分的高度cli...
JS中的鼠标事件
m0_70185826的博客
07-01 9878
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
js中鼠标事件
m0_54089303的博客
02-13 1万+
click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标移动事件。 mouseover：移入事件。 mouseout：移出事件。 mouseenter：移入事件。 mouseleave：移出事件。 contextmenu：右键事件。 mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover
JS常用鼠标事件
前端开发-陈善强
12-01 1234
1. 禁止选中文字和禁止右键菜单 1.1 禁止鼠标右键菜单 contextmenu事件：鼠标右键菜单事件。主要控制应该何时显示上下文菜单（右键菜单），主要用于程序员取消默认的上下文菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) 1.2 禁止鼠标选中（selectstart 事件：...
授权认证登录之 Cookie、Session、Token、JWT 详解
热门推荐
huangpb的博客
01-14 1万+
目录 一、先了解几个基础概念 二、什么是 Cookie 1. cookie 重要的属性 2. 服务器端设置cookie示例（Node） 3. 客户端对Cookie的存取 4. 每个域名下cookie个数限制 5.封装对Cookie的操作 三、什么是 Session 四、Cookie 和 Session 的区别 五、什么是 Token（令牌） Acesss Token ...
前端数据模拟的几种方法
huangpb的博客
02-07 1万+
现在开发项目社会的主流是前后端分离，这样前端和后端就可以根据自己的进度开发，可以不同步。后端同学接口还没做好，前端同学怎么测试呢，这样就要用到模拟数据了。 现在我就来说说我认为还不错的三种模拟数据方法。 方法一：请求本地的 json 文件 项目里新建个文件夹用来存放测试用的 json 文件。 reqwest({ url: 'mock/user.json'
前端缓存详解
huangpb的博客
09-26 5758
前言 缓存机制无处不在，有客户端缓存，服务端缓存，代理服务器缓存等。 一、按缓存位置分类 按缓存位置分类，可以分为：Service Worker，Memory Cache，Disk Cache。 在 Chrome 浏览器开发者工具的Network的Size栏会出现的四种情况： from ServiceWorker from memory cache from disk cache ...
服务器渲染和浏览器渲染的区别
huangpb的博客
10-31 4558
何为渲染？ 页面上的数据要发生更新，就是渲染。 这个工作放在服务器进行就是服务器渲染，放在浏览器进行就是浏览器渲染。 服务器端渲染，指的是后台语言通过一些模板引擎生成 html。 浏览器端渲染，指的是用 js 去生成 html，前端做路由。 浏览器端渲染路线： 请求一个 html。 服务端返回一个 html。 浏览器下载 html 里面的 js/css 文件。 等待 js 文件下...
PC端浏览器兼容性解决方案
huangpb的博客
10-13 2015
代码兼容：IE7及以上，360浏览器，搜狗浏览器，谷歌，火狐，欧朋等等。 一．需要注意的地方： 1.写好标准头： 2.首先引入初始化css,保证消除不同浏览器的细微差别。 具体内容： *{margin:0;padding:0;} body{font-size:12px;line-height:25px;font-family:Arial,Helvet
js数据结构
huangpb的博客
12-21 1575
一、认识数据结构 什么是数据结构？下面是维基百科的解释 数据结构是计算机存储、组织数据的方式 数据结构意味着接口或封装：一个数据结构可被视为两个函数之间的接口，或者是由数据类型联合组成的存储内容的访问方法封装 我们每天的编码中都会用到数据结构，因为数组是最简单的内存数据结构，下面是常见的数据结构： 数组（Array） 栈（Stack） 堆（Heap） 队列（Queue） 链表（L...
前端三大主流框架的对比React、Vue、Angular
huangpb的博客
08-21 905
1. 组件 React 和 Vue 都擅长处理组件：小型的无状态的函数接收输入和返回元素作为输出。Angular 没有组件化的概念。 2. Typescript，ES6 与 ES5 React 专注于使用 ES6。Vue 使用 ES5 或 ES6。Angular 依赖于 TypeScript。 3. 模板 —— JSX 还是 HTML React 使用 JSX 模板，把 'HTML' 放...
JavaScript模块化 --- Commonjs、AMD、CMD、UMD、ES6 modules
huangpb的博客
06-06 660
模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。 AMD、CMD、CommonJs 是ES5中提供的模块化编程方案，ES6 Modules 是ES6提供的模块化编程方案。 IIFE 使用自执行函数来编写模块化。 特点：在一个单独的函数作用域中执行代码，避免变量冲突。 (function() { return { data: [] }; })(); AMD（A...
qt中widget鼠标滚动事件
最新发布
08-03
### 回答1： 可以通过重写 QWidget 的 wheelEvent(QWheelEvent *event) 函数来处理鼠标滚动事件。在函数中可以通过 event->angleDelta() 获取鼠标滚动的角度，然后根据需要进行处理。 ### 回答2： 在Qt中，widget的鼠标滚动事件是指当用户使用鼠标滚轮滚动widget时触发的事件。可以通过重写QWidget类中的wheelEvent()函数来处理鼠标滚动事件。 在wheelEvent()函数中，我们可以使用QWheelEvent类的方法来获取鼠标滚动的信息，例如滚动的角度、滚动的方向、滚动的位置等。然后根据需要进行相应的操作。 以下是一个基本的示例代码，展示了如何在widget中处理鼠标滚动事件： ```cpp #include <QtWidgets> class MyWidget : public QWidget { public: MyWidget(QWidget *parent = nullptr) : QWidget(parent) {} protected: void wheelEvent(QWheelEvent *event) override { // 获取滚动的角度 int delta = event->angleDelta().y(); // 判断滚动的方向 if (delta > 0) { // 向上滚动 // 进行相应的操作 qDebug() << "Scroll Up"; } else if (delta < 0) { // 向下滚动 // 进行相应的操作 qDebug() << "Scroll Down"; } // 阻止事件传递给其他控件 event->accept(); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MyWidget widget; widget.resize(300, 200); widget.show(); return app.exec(); } ``` 在上述示例中，我们定义了一个名为MyWidget的自定义Widget类，继承自QWidget。在它的wheelEvent()函数中，我们首先通过event->angleDelta().y()方法获取滚动的角度，然后根据滚动的正负值判断滚动的方向。最后我们使用qDebug()输出滚动的方向。 需要注意的是，在wheelEvent()函数中，我们使用event->accept()来阻止事件的传递给其他控件。这个非常重要，因为如果不处理此事件，那么事件将继续传递给其他控件进行处理，可能会产生意想不到的结果。 在实际使用中，我们可以根据需要在鼠标滚轮事件中进行相应的操作，例如在滚动时改变widget的显示内容、更新一些数据等。 ### 回答3： 在Qt中，通过继承QWidget类，可以实现对鼠标滚动事件的处理。 首先，在自定义的QWidget子类中重写滚动事件的处理函数，即重写QWidget的wheelEvent(QWheelEvent *event)函数。在该函数中可以对鼠标滚动事件进行处理，根据滚轮的滚动方向来进行相应的操作。 然后，可以在重写的函数中通过调用event->delta()函数来获取滚轮滚动的距离。返回的结果为正数表示鼠标向前滚动，负数则表示鼠标向后滚动。根据这个距离值，可以进行一些缩放、滚动或者其他操作。 例如，可以在滚动事件中实现图片的缩放功能。当鼠标向前滚动时，可以将图片放大一定比例，反之，则缩小一定比例。可以通过调整图片的尺寸大小或者对图片进行矩阵变换来实现缩放效果。 除了上述操作，还可以根据自己的需求进行其他操作，比如鼠标滚动时切换页面、调整音量、改变滚动条位置等等。 总之，通过重写QWidget的wheelEvent函数，在其中根据滚轮的滚动距离进行相应的操作，可以实现对鼠标滚动事件的处理。根据具体需求，在滚动事件中进行相应的逻辑操作，以实现丰富的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值