python鼠标移动事件是真的吗_JS mousemove事件:鼠标移动事件
在JavaScript 中,mousemove 事件是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动一个像素),就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。
示例
下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。
定义拖放元素为绝对定位以及设计事件的响应过程,这个比较容易实现。
清楚几个坐标概念:按下鼠标时的指针坐标,移动中当前鼠标指针坐标,松开鼠标时的指针坐标,拖放元素的原始坐标,拖动中的元素坐标。
算法设计:按下鼠标时,获取被拖放元素和鼠标指针的位置,在移动中实时计算鼠标偏移的距离,并利用该偏移距离加上被拖放元素的原坐标位置,获得拖放元素的实时坐标。
如下图所示,其中变量 ox 和 oy 分别记录按下鼠标时被拖放元素的纵横坐标值,它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。变量 mx 和 my 分别表示按下鼠标时,鼠标指针的坐标位置。而 event.mx 和 event.my 是事件对象的自定义属性,用它们来存储当鼠标移动时鼠标指针的实时位置。
当获取了上面 3 对坐标值之后,就可以动态计算拖动中元素的实时坐标位置,即 x 轴值为 ox+event.mx-mx,y 轴为 oy+event.my-my。当释放鼠标按钮时,就可以释放事件,并记下松开鼠标指针时拖动元素的坐标值,以及鼠标指针的位置,留待下一次拖放操作时调用。
整个拖放操作的示例代码如下:
// 初始化拖放对象
var box = document.getElementById("box");
// 获取页面中被拖放元素的引用指针
box.style.position = "absolute"; // 绝对定位
box.style.width = "160px"; // 定义宽度
box.style.height = "120px"; // 定义高度
box.style.backgroundColor = "red"; // 定义背景色
// 初始化变量,标准化事件对象
var mx, my, ox, oy; // 定义备用变量
function e(event){ // 定义事件对象标准化函数
if( ! event){ // 兼容IE浏览器
event = window.event;
event.target = event.srcElement;
event.layerX = event.offsetX;
event.layerY = event.offsetY;
}
event.mx = event.pageX || event.clientX + document.body.scrollLeft;
// 计算鼠标指针的x轴距离
event.my = event.pageY || event.clientY + document.body.scrollTop;
// 计算鼠标指针的y轴距离
return event; // 返回标准化的事件对象
}
// 定义鼠标事件处理函数
document.onmousedown = function(event){ // 按下鼠标时,初始化处理
event = e(event); // 获取标准事件对象
o = event.target; // 获取当前拖放的元素
ox = parseInt(o.offsetLeft); // 拖放元素的x轴坐标
oy = parseInt(o.offsetTop); // 拖放元素的y轴坐标
mx = event.mx; // 按下鼠标指针的x轴坐标
my = event.my; // 按下鼠标指针的y轴坐标
document.onmousemove = move; // 注册鼠标移动事件处理函数
document.onmouseup = stop; // 注册松开鼠标事件处理函数
}
function move(event){ // 鼠标移动处理函数
event = e(event);
o.style.left = ox + event.mx - mx + "px"; // 定义拖动元素的x轴距离
o.style.top = oy + event.my - my + "px"; // 定义拖动元素的y轴距离
}
function stop(event){ // 松开鼠标处理函数
event = e(event);
ox = parseInt(o.offsetLeft); // 记录拖放元素的x轴坐标
oy = parseInt(o.offsetTop); // 记录拖放元素的y轴坐标
mx = event.mx ; // 记录鼠标指针的x轴坐标
my = event.my ; // 记录鼠标指针的y轴坐标
o = document.onmousemove = document.onmouseup = null;
// 释放所有操作对象
}
python鼠标移动事件是真的吗_JS mousemove事件:鼠标移动事件相关推荐
- python鼠标点击事件event_opencv-python教程学习系列5-处理鼠标事件
前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍opencv-python处理鼠标事件,坚持学习,共同进步. 系统环境 系统:win_x64; p ...
- python控制鼠标点击_python模拟点击中如何操作鼠标位置?
在进行正式的实战模拟点击之前,我们已经学过了鼠标的简单常用操作.那么大家会运用到python代码中吗?对于python小白来说还是一件困难的事情,毕竟写代码方面不是很擅长.这里小编整理了一些关于鼠标的 ...
- Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
- Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件)
Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件) 导读 动态演示调用python库的tkinter带你进入GUI世界(Button ...
- qt linux 鼠标事件,QT学习笔记5:QMouseEvent鼠标事件简介
一.QMouseEvent的详细描述 首先请注意,Qt中的QMouseEvent一般只涉及鼠标左键或右键的单击.释放等操作,而对鼠标滚轮的响应则通过QWheeEvent来处理. QMouseEvent ...
- drawforeground只有鼠标事件进入才刷新_为什么移动鼠标会让操作系统跑得更快?...
作者丨InfoQ 译者丨无明 策划丨小智 1 有人在 Stack Overflow 上问了一个问题 在玩 Hypnospace Outlaw(催眠帝国的法外狂徒)这款游戏时,我发现移动鼠标会让网页加载 ...
- java焦点事件如何使用_Java中如何释放鼠标事件的焦?
1.使用MouseListener接口处理鼠标事件 鼠标事件有5种:按下鼠标键,释放鼠标键,点击鼠标键,鼠标进入和鼠标退出 mousePressed(MouseEvent e) 鼠标按下时调用 mou ...
- Qt安装事件过滤器、过滤子控件事件、截获控件按键、鼠标事件
Qt安装事件过滤器.过滤子控件事件.截获控件按键.鼠标事件 Qt的事件模型一个强大的功能是一个QObject对象能够监视发送其他QObject对象的事件,在事件到达之前对其进行处理. 假设我们有一个C ...
- Python里面的编码问题真的让人快疯了.. Python乱码 b'\x1f\x8b\x08\x00\x00\x00\x00\x00\...'
Python里面的编码问题真的让人快疯了- 比如res打印出来是这个b'\x1f\x8b\x08\x00\x00\x00\x00\x00-' import gzip ret = gzip.decomp ...
- 你希望这些事件是真的吗
你希望这些事件是真的吗 作者:左岸读书 日期: 2008-02-02 来源:http://dhlmtzx.edudh.net/oblog/article.asp?id=1978 字体大小: 小 中 大 ...
最新文章
- tiny210V2 Uboot kernel filesystem 烧写和启动
- 通过代码获取Bitmap图片资源
- python如何进行双色球预测最准确_【原创】python基于大数据现实双色球预测
- SharedPreference.Editor的 apply 和commit 方法异同
- idea自动生成not null判断语句
- Time, Clocks, and the Ordering of Events in 翻译
- Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
- flutter怎么手动刷新_Flutter 小技巧实现通用的局部刷新
- zabbix-自定义键值监控网卡IN、OUT流量
- java Servlet文件拷贝的模板代码
- 凸优化第二章凸集 2.4 广义不等式
- 0618----Shell(二)
- 2.4g和5g要不要合并_路由器2.4g和5g要不要合并?
- linux用gzip文件,Linux中的Gzip命令
- html右侧划出层,点击按钮网页居中滑出覆盖层和消息提示盒子
- PDP附着和PDP激活的区别
- 永恒都市3服务器一直维护,感恩有你 《永恒都市3》删档二测已于昨日完美谢幕...
- HTML5 游戏开发快速提升
- 数仓工具—Hive源码之SQL解析Antlr入门(7)
- macM1下PD虚拟机中ubuntu安装git过程中apt-get update失败、E: 部分索引文件下载失败等问题
热门文章
- 题10.3:从键盘输入一个字符串,将其中的小写字母全部转换成大写字母,然后输出到一个磁盘文件test中保存,输入的字符串以“感叹号”结束。
- AI智能化技术对项目管理的挑战与应对︱腾讯CSIG能源行业总经理王磊
- Oracle格式化时间时出现时差
- sublime 使用的一些问题
- 【论文阅读】Look-into-Object: Self-supervised Structure Modeling for Object Recognition
- Take me to your heart-Michael Learns To Rock
- localStorage数据存储设置有效期
- 福州大学至诚学院计算机报名时间,(福建)2019年6月福州大学至诚学院英语六级报名时间及费用公布...
- java jit性能_《Java性能权威指南》笔记----JIT编译器
- 【调剂】中国石油大学(北京)安全与海洋工程学院陈浩课题组招收调剂硕士研究生...