python获取鼠标指针坐标_JS获取鼠标指针的位置(坐标)
本示例讲解 JavaScript 获取指针的页面位置和相对位置。
获取指针的页面位置
使用事件对象的 pageX 和 pageY(兼容 Safari),或者 clientX 和 clientY(兼容 IE)属性,同时还需要配合 scrollLeft 和 scrollTop 属性,就可以计算出鼠标指针在页面中的位置。
//获取鼠标指针的页面位置
//参数:e表示当前事件对象
//返回值:返回鼠标相对页面的坐标,对象格式(x,y)
function getMP (e) {
var e = e || window.event;
return {
x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft),
y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
}
}
pageX 和 pageY 事件属性不被 IE 浏览器支持,而 clientX 和 clientY 事件属性又不被 Safari 浏览器支持,因此可以混合使用它们以兼容不同浏览器。对于怪异模式来说,body 元素代表页面区域,而 html 元素被隐藏,但是标准模式以 html 元素代表页面区域,而 body 元素仅是一个独立的页面元素,所以需要兼容这两种解析方式。
下面示例演示了如何调用上面扩展函数 getMP() 捕获当前鼠标指针在文档中的位置。
var t = document.getElementById("t");
document.onmousemove = function(e){
var m = getMP(e);
t.value ="mouseX = " + m.x + "\n" + "mouseY = " + m.y
}
演示效果如下:
获取指针的相对位置
使用 offsetX 和 offsetY 或者 layerX 和 layerY 可以获取鼠标指针相对定位包含框的偏移位置。如果使用 offsetLeft 和 offsetTop 属性获取元素在定位包含框中的偏移坐标,然后使用 layerx 属性值减去 offsetLeft 属性值,使用 layery 属性值减去 offsetTop 属性值,即可得到鼠标指针在元素内部的位置。
//获取鼠标指针在元素内的位置
//参数:e表示当前事件对象,o表示当前元素
//返回值:返回相对坐标对象
function getME (e, o) {
var e = e || window.event;
return {
x : e.offsetX || (e.layerX - o.offsetLeft),
y : e.offsetY || (e.layerY - o.offsetTop)
}
}
在实践中上面函数存在以下两个问题:
Mozilla 类型和 Safari 浏览器以元素边框外壁的左上角为参照点。
其他浏览器则是以元素边框内壁的左上角为坐标原点。
考虑到边框对鼠标位置的影响,当元素边框很宽时,必须考虑如何消除边框对于鼠标位置的影响。但是,由于边框样式不同,它存在 3 像素的默认宽度,为获取元素的边框实际宽度带来了麻烦。需要设置更多的条件,来判断当前元素的边框宽度。
示例
完善后的获取鼠标指针在元素内的位置扩展函数如下:
//完善获取鼠标指针在元素内的位置
//参数:e表示当前事件对象,o表示当前元素
//返回值:返回鼠标相对元素的坐标位置,其中x表示x轴偏移距离,y表示y轴偏移距离
function getME(e, o){
var e = e || window.event;
//获取元素左侧边框的宽度
//调用getStyle()扩展函数获取边框样式值,并尝试转换为数值,如果转换成功,则赋值。
//否则判断是否定义了边框样式,如果定义边框样式,且值不为none,则说明边框宽度为默认值,即为3像素。
//如果没有定义边框样式,且宽度值为auto,则说明边框宽度为0
var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0);
//获取元素顶部边框的宽度,设计思路与获取左侧边框方法相同
var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !="none" ) ? 3 : 0);
var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // 一般浏览器下鼠标偏移值
//兼容Mozilla类型浏览器,减去边框宽度
var y = e.offsetY || (e.layerY - o.offsetTop - bt); // 一般浏览器下鼠标偏移值
//兼容Mozilla类型浏览器,减去边框宽度
var u = navigator.userAgent; // 获取浏览器的用户数据
if( (u.indexOf("KHTML") > - 1) ||(u.indexOf("Konqueror") > - 1) || (u.indexOf("AppleWebKit") > - 1)
){ // 如果是Safari浏览器,则减去边框的影响
x -= bl; y -= bt;
} return { // 返回兼容不同浏览器的鼠标位置对象,以元素边框内壁左上角为定位原点
x : x, y : y
}
}
演示效果如图所示。
python获取鼠标指针坐标_JS获取鼠标指针的位置(坐标)相关推荐
- js 获取url问号前_js获取历史url
js获取历史url以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 一.JS高手呢,获取历史网址 你的问题涉及到 Same ...
- php 获取 年月日时分秒_JS获取年月日时分秒的方法分析
本文实例分析了JS获取年月日时分秒的方法.分享给大家供大家参考,具体如下: var d = new Date(); var time = d.getFullYear() + "-" ...
- js 获取当前gmt时间_js获取当前时区GMT
1:js获取当前时区GMT 首先引入插件: // 获取当前时区GMT var timezone = jstz.determine(); var Asia = timezone.name(); 2:字符 ...
- js 获取屏幕高宽_JS获取屏幕的宽高。
function a(){ document.write( "屏幕分辨率为:"+screen.width+"*"+screen.height +" & ...
- js 获取当前gmt时间_js 获取时区
js的时区函数: 设datename为创建的一个Date对象 ==================== datename.getTimezoneOffset() --取得当地时间和GMT时间(格林威治 ...
- java获取鼠标在窗口_Java获取窗口鼠标坐标以及键盘按键
Java中的鼠标和键盘事件 1.使用MouseListener借口处理鼠标事件 鼠标事件有5种:按下鼠标键,释放鼠标键,点击鼠标键,鼠标进入和鼠标退出 鼠标事件类型是MouseEvent,主要方法有: ...
- C++获取鼠标坐标并移动鼠标
原文章地址: C++获取鼠标坐标并移动鼠标 公司电脑强制设定10分钟无鼠标键盘输入便锁屏,锁屏之后要重新输入密码太麻烦.代码自动检测过去4.9分钟内鼠标是否发生了移动,如果没有发生移动则移动鼠标位置. ...
- cesium 鼠标点击事件获取各种坐标
文章目录 cesium点击事件 屏幕坐标 世界坐标(也叫笛卡尔坐标Cartesian3) 场景坐标 问题列表: cesium点击事件 new Cesium.ScreenSpaceEventHandle ...
- 百度地图实现鼠标绘制多边形并获取所有点坐标
百度地图开放平台http://lbsyun.baidu.com/ 这里使用的是Javascript API http://lbsyun.baidu.com/index.php?title=jspopu ...
- Windows下C/C++模拟鼠标点击,PC端没有鼠标设备也能够获取鼠标坐标、移动鼠标坐标、模拟鼠标点击事件,方法一 亲测有效
------- [ 转载请保留 ] ------- 作者:西_瓜_瓜 博客:https://blog.csdn.net/xi_gua_gua/article/details/105773298 --- ...
最新文章
- oracle索引未使用,oracle
- Google Dremel数据模型详解(下)
- matlab 两幅图不同,如何把两个不同M文件的图放在一起
- mybatis高级(3)_延迟加载_深度延迟_一级缓存_二级缓存
- Express新建工程以及新建路由规则、匹配路由规则、控制权转移
- 学生管理系统java mysql_学生信息管理系统 基于Java+mysql开发的学生管理系统 - 下载 - 搜珍网...
- 选择Java密码算法第1部分-散列
- Invalid escape sequence(valid ones are \b \t \n \f \r \ \' \\)
- 工作分解结构(Work Breakdown Structure,简称WBS)
- Win10上的CPU内存的悬浮窗口
- 第四章 sysrepo共享内存机制
- html网页结尾署名,书信署名及敬语常识(转摘)
- mermaid flowchart使用指南
- 修改SrollView嵌套下的整个layout背景色
- Navicat Premium 用于增强您的数据库管理系统
- linux 修改文件夹和子文件夹权限,Linux下设置文件夹以及子文件夹中所有文件权限...
- 不宜猥琐惊世人 猥琐哥横空出世
- Java基础语法(三)——运算符
- Excel 数据透视表教程大全之 04 按日期分组(教程含样本数据)
- leetcode:Add Two Numbers(java)
热门文章
- 2021年安全员-B证-项目负责人(广东省)考试题及安全员-B证-项目负责人(广东省)考试总结
- CAD,SolidWorks相比ProE,UG等软件有什么区别?
- 【积分变换】积分变换常用公式定理与方法
- 光谱共焦的干涉测量原理及厚度测量模式
- RGB888颜色码与十六位(RGB565)颜色码的转换
- 摄氏度和开氏度的换算_k与摄氏度的换算(摄氏度与开氏度换算)
- 10张图看懂人口普查数据
- 算法工程师面试基础题目及答案
- html 英文艺术字体,生日快乐英文艺术字体
- 项目管理手记(八) SaaS模式的DRP系统是否适用?