JS获取鼠标坐标的实例方法

代码如下:

var restrictX; 
var restrictY; 
var tip; 
// 鼠标坐标  
function mousePosition(ev) { 
return { 
        x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, 
        y : ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop 
    }; 
} 
// 鼠标事件  
function mouseMove(ev) { 
    ev = ev || window.event; 
    var mousePos = mousePosition(ev); 
    restrictX = mousePos.x; 
    restrictY = mousePos.y; 
} 
document.onmousemove = mouseMove; 
document.onclick = mouseMove;

上面的代码在谷歌和搜狐浏览器中获取的值会不准确，需进行修改，如下：


代码如下:

var restrictX; 
var restrictY; 
var tip; 
// 鼠标坐标  
function mousePosition(ev){ 
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
    return { 
        x:ev.clientX + scrollLeft - document.documentElement.clientLeft, 
        y:ev.clientY + scrollTop - document.documentElement.clientTop 
    }; 
} 
// 鼠标事件  
function mouseMove(ev){ 
    ev = ev || window.event; 
    var mousePos = mousePosition(ev); 
    restrictX = mousePos.x; 
    restrictY = mousePos.y; 
} 
document.onmousemove = mouseMove; 
document.onclick = mouseMove;

代码如下:

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

这两句为，如果能获取到鼠标坐标，则去前面，否则用后面的方法获取鼠标坐标，“|| ”后面的是给WebKit 内核的浏览器使用

赞 (0)

相关推荐

  • JS网页在线获取鼠标坐标值的方法

    本文实例讲述了JS网页在线获取鼠标坐标值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>显示鼠标坐标</title> </head> <body onMousemove="m

  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

    JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • js使用onmousemove和onmouseout获取鼠标坐标的方法

    本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!DOCTYPE html> <html> <head> <script> function myFunction(e) { x=e.clientX; y=e.clientY; coor="Coordinat

  • JS获取鼠标坐标、获取鼠标像素点示例

    JS获取鼠标坐标,获取鼠标像素点的典型实例,运行本页面后,随意移动鼠标的位置,可适时显现鼠标的坐标点,不占用系统资源 . JavaScript获取鼠标坐标 .tip { width:200px; border:2px solid #ddd; padding:8px; background:#f1f1f1; color:#666; } function mousePos(e){ var x,y; var e = e||window.event; return { x:e.clientX+docum

  • JS获取鼠标坐标位置实例分析

    本文实例分析了JS获取鼠标坐标位置的方法.分享给大家供大家参考,具体如下: 取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持,但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持,但是没有关系,可以通过s

  • JS onmousemove鼠标移动坐标接龙DIV效果实例

    JS onmousemove鼠标移动坐标接龙DIV效果实例

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 20px;            height: 20px;

  • 在页面中js获取光标/鼠标的坐标及光标的像素坐标

    近期为网站开发页面统计,以前虽然也开发过,但是功能不是很全,所以这次把一些好功能给用上. 例如这次的,页面JS光标/鼠标坐标,你也许问着有什么用,百度统计中有个热点统计图,这下清楚明白了吧. 好了,上肉: 功能:获取光标的像素坐标 复制代码 代码如下: <html> <head> <script type="text/javascript"> function showPosition(e){ var x,y; var e = e||window.e

  • js与jquery中获取当前鼠标的x、y坐标位置的代码

    复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

  • js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • javascript实时获取鼠标坐标值并显示的方法

    本文实例讲述了javascript实时获取鼠标坐标值并显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • js获得鼠标的坐标值的方法

    复制代码 代码如下: var x , y; //当需求为获得的坐标值相对于body时,用: function positionBody(event){ event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY } //当需求为获得的坐标值相对于某一对象时,用: function positionObj(event,id){ //获得对象相对于页面的横坐标值:

  • javascript获取当前鼠标坐标的方法

    本文实例讲述了javascript获取当前鼠标坐标的方法.分享给大家供大家参考.具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解.具体代码如下: 复制代码 代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars

随机推荐