教你javascript如何获取指针的位置
javascript获取指针的位置的方法：使用事件对象的pageX和pageY，或者clientX和clientY属性，并且配合scrollLeft和scrollTop属性，这样就可以计算出指针的位置了。
本文操作环境：windows10系统、javascript 1.8.5、thinkpad t480电脑。
要想获取指针在页面中的位置，可以使用事件对象的pageX和pageY，或者是 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() 捕获当前鼠标指针在文档中的位置。
<body style="width:2000px;height:2000px;">
<textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea>
</body>
<script>
var t = document.getElementById("t");
document.onmousemove = function(e){
var m = getMP(e);
t.value ="mouseX = " + m.x + "\n" + "mouseY = " + m.y
}
</script>
演示效果如下：
获取指针的相对位置
使用 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
}
}
演示效果如下：
推荐学习：javascript视频教程
到此这篇关于javascript获取指针的位置的文章就介绍到这了,更多相关js指针的位置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
改变javascript函数内部this指针指向的三种方法
在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. 复制代码 代码如下: function a() { alert(this); } 或者 var a = function() { alert(this); } 都可以认为是创建了一个变量,这个变量的值就是一个函数. 规则1:如果一个函数,是某个对象的key 值,那么,this就指向这个对象. 这个规则很好理解: 复制代码 代码如下: var
-
有关js的变量作用域和this指针的讨论
一.变量作用域:[P71] 这一句话说的非常精辟:"在ECMAScript中,只有两种执行环境,全局环境和函数环境,每个函数都是一个执行环境,包括嵌套函数.换句话说,其他情况下即使变量声明在一对大括号中,在括号外部仍然可以访问这些变量".以下给出例子: 复制代码 代码如下: for(var i=0; i<5; i++) { var num = 20; // 在for语句中声明的变量 } alert(num); // 在for语句外部调用变量,仍然可以得到num的值 对异常语句也同
-
Javascript this指针
前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript 可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性.特别是对于接触静态语言比较久了的同志来说更是如此. 示例说明 我们先来看一个最简单的示例: <script type="text/javascript&
-
浅谈JavaScript中指针和地址
个人理解:指针只是指向内存的一个索引:而地址则是内存中确切的位置. 下面是函数中关于指针和地址一个小例子: function sum(num1,num2){ return num1+num2; } alert(sum(10,10)); //20 var anotherSum=sum; alert(anotherSum(10,10)); //20 sum=null; alert(anotherSum(10,10)); //20 注意:使用不带圆括号的函数的名是访问函数指针,而非调用函数,所以 su
-
对JavaScript中this指针的新理解分享
一直以来对this的理解只在可以用,会用,却没有去深究其本质.这次,借着<JavaScript The Good Parts>,作了一次深刻的理解.(所有调试都可以在控制台中看到,浏览器F12键) 下面我们一起来看看这个this吧. 在我们声明一个函数时,每个函数除了有定义时的parameters(形参),自身还会有额外的两个参数,一个是this,一个是arguments(实参).arguments就是函数实际接受到的参数,是一个类数组.arguments我只做个简略的介绍,重点我们放在thi
-
JavaScript中变量、指针和引用功能与操作示例
本文实例讲述了JavaScript中变量.指针和引用功能与操作.分享给大家供大家参考,具体如下: 1.变量 我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢? 事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中存放的具体信息. 例如,在JS中 var a; a=10; 第一个语句在存储器中指定了一组存储单元,并命名为a: 第二个语句在这组存储单元中存储了数字10. 变量a的值为10实际上是说存储单元组a存
-
教你javascript如何获取指针的位置
javascript获取指针的位置的方法:使用事件对象的pageX和pageY,或者clientX和clientY属性,并且配合scrollLeft和scrollTop属性,这样就可以计算出指针的位置了. 本文操作环境:windows10系统.javascript 1.8.5.thinkpad t480电脑. 要想获取指针在页面中的位置,可以使用事件对象的pageX和pageY,或者是 clientX 和 clientY(兼容 IE)属性,同时还需要配合 scrollLeft 和 scrollT
-
python如何获取文件当前位置和定位某个位置
目录 一.背景 二.获取当前读写位置 三.定位到某个位置 四.总结 一.背景 Python 是一门易于学习.功能强大的编程语言.它提供了高效的高级数据结构,还能简单有效地面向对象编程. Python 优雅的语法和动态类型以及解释型语言的本质,使它成为多数平台上写脚本和快速开发应用的理想语言. 下面我们来介绍一下python的文件指针定位相关知识. 二.获取当前读写位置 在读写文件的过程中,如果想知道当前文件位置指针的位置,可以通过调用tell()方法来获取. tell()方法返回文件的当前位置,
-
基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）
废话不多说了,直接给大家贴js代码了.具体代码如下所示: function Location(){}; Location.prototype.getLocation = function(callback){ var options = { enableHighAccuracy: true, maximumAge: 1000 }; this.callback = Object.prototype.toString.call(callback) =="[object Function]"
-
JavaScript获取指定元素位置的方法
本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() { var self = document.getElementById("eID"); var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft; var top = self.getBoundingClientR
-
JavaScript 获取/设置光标位置,兼容Input&&TextArea
JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px
-
Javascript实现获取及设置光标位置的方法
本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE
-
Javascript实现获取窗口的大小和位置代码分享
在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分).对于IE6 及之前版本,要区分是标准模式,还是混杂模式.标准模式使用document.documentElement.clientWidth,document.documentElement.clientHeight:混杂模式使用document.body 的clientWidth,clientHeight. 复
-
在 javascript 中如何快速获取数组指定位置的元素
目录 前言 数组的 at() 方法 前言 在 JavaScript 中如果我们需要获取一个数组指定位置的元素,通常情况下,我们一般采用以下方法: 1.通过下标直接获取指定元素:arr[index], index 为非负数. let arr = [1, 4, 5, 8, 10] // 获取数组的第一个元素 let num1 = arr[0] // 获取数组的最后一个元素 let num2 = arr[arr.length - 1] // 获取数组的倒数第二个元素 let num3 = arr[ar
-
javascript实现拖动元素交换位置
本文实例讲述了javascript实现拖动元素交换位置的代码.分享给大家供大家参考.具体如下: 实现目标:可拖动元素拖动到另外一个元素位置的时候,互相交换位置. 启发来源:最初形式是网上看到的一个拼图小游戏. 运行效果截图如下: 具体代码如下: 代码: body,ul,li{margin:0;padding:0;} ul{list-style: none;} body{font:13px/1.5 Tahoma;} #box{position:relative;width:435px;height
-
JavaScript中获取高度和宽度函数总结
html代码: 复制代码 代码如下: <body> <div class="father" id="father"> <h3>这是父元素,屏幕分辨率是1366*768</h3> <div class="son" id="son"> <h3>这是子元素,祝大家国庆快乐 </h3&g