Javascript在IE或Firefox下获取鼠标位置的代码

第一段代码是利用全局变量来获取实时鼠标的位置。


代码如下:

var xPos;
var yPos;
window.document.onmousemove(function(evt){
evt=evt || window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
} else {
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
});

因为IE和Firefox对clientX的解析不一样，IE认为clientX是鼠标相对整个页面左上角的位置，而Firefox认为是相对当前所见页面左上角的位置。而这段代码最终返回的结果是整个页面左上角的位置。这段代码的缺陷是，xPos和yPos是实时变动的。

第二段代码是通过函数获取当前时刻的鼠标坐标值

代码如下:

document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

这段代码的来源是这里，这个网站还提供了一些简单的样例给我们玩耍。这个函数和刚才的函数理论是一致的，先触发mousemove事件，然后获取了事件之后，分别判断浏览器类型。这段代码的优点是，不适用全局变量，并且可以随用随拿，只要调用这个函数，就能够获取鼠标坐标。

这两段代码，个人偏好于后者，现在先把这段代码记下来，这段代码应该是会经常被使用到的。

赞 (0)

相关推荐

  • javascript获取鼠标位置部分的实例代码(兼容IE,FF)

    复制代码 代码如下: var xPos; var yPos; document.onmousemove = mouseMove; function mouseMove(ev) { ev = ev window.event; var mousePos = mouseCoords(ev); xPos = mousePos.x; yPos = mousePos.y; } function mouseCoords(ev) { if (ev.pageX ev.pageY) { return { x: ev

  • js获取鼠标位置实例详解

    本文实例讲述了js获取鼠标位置的方法.分享给大家供大家参考,具体如下: 用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等.当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,这里详细介绍了浏览器在处理这些属性时的差异和最终的解决方法. Javascript代码如下: <script type="text/javascript"> // 说明:获取鼠标位置 // 整

  • js判断鼠标位置是否在某个div中的方法

    本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

  • javascript窗口宽高,鼠标位置,滚动高度(详细解析)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版

    JS获得鼠标位置(兼容多浏览器ie,firefox)我们修正版 function mouseMove(ev) { ev= ev || window.event; var mousePos = mouseCoords(ev); //alert(ev.pageX); document.getElementById("xxx").value = mousePos.x; document.getElementById("yyy").value = mousePos.y; }

  • Javascript 获取鼠标当前的位置实现方法

    Javascript 获取鼠标当前的位置实现方法

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(

  • firefox中用javascript实现鼠标位置的定位

    /**  * 取得鼠标坐标  * @return Position  */  function getMouseLocation(){  if(ns4||ns6){  mouseX = e.pageX;  mouseY = e.pageY;  }  else{  mouseX = event.x + document.body.scrollLeft;  mouseY = event.y + document.body.scrollTop;  }  return {x:mouseX,y:mouse

  • 基于JavaScript获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

  • js获取鼠标位置杂谈附多浏览器兼容代码

    其实获得鼠标位置就是一句话的事情,但是要是不了解浏览器间的区别,整个过程就会让人很郁闷,区别在与: 1.IE下获得x和y轴的距离分别用event.x和event.y: FF下获得x和y轴的距离分别用event.pageX和event.pageY: 2.IE下用此方法获得的位置是不算滚动条滚过的位置的,即它只会算到浏览器边缘: FF则会算进滚过去的那些位置: (这个地方很让我崩溃,为这么点小区别我把所有用到的程序全部重写了一遍,囧死--) 解决1的办法,无非是判断一下浏览器,然后用什么方式: 解决

  • JavaScript中获取鼠标位置相关属性总结

    javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象. 我们通过监听document的mousemove,就可以实时获得鼠标位置. 但是!!event中和鼠标相关的属性太多了,很让人头大!如下: event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event

随机推荐