网站地图    收藏   

主页 > 前端 > javascript >

JavaScript 获取鼠标位置坐标(点击位置)代码

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 在javascript中我们要获取鼠标位置坐标有几种,一种是相对位置(浏览器窗口、文档位置)等等几乎这些我们都是用到了 document.body.scrollTop、document.body.scrollLeft等dom命令,下面我来详细介绍...

例1

 

 代码如下 复制代码
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.pageX, y: ev.pageY };
}
return {
x:ev.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:ev.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
}

获取鼠标点击位置坐标

相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致。

 代码如下 复制代码

function getMousePos(event) {
            var e = event || window.event;
            return {'x':e.screenX,'y':screenY}
}

相对浏览器窗口

 代码如下 复制代码

function getMousePos(event) {
            var e = event || window.event;
            return {'x':e.clientX,'y':clientY}
}

相对文档

 代码如下 复制代码

function getMousePos(event) {
            var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY;
            //alert('x: ' + x + 'ny: ' + y);
            return { 'x': x, 'y': y };
}


不同浏览器中event位置属性的分析:

1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)
2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)
3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)
4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数)


1. scrollHeight: 获取对象的滚动高度
2. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
3. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
4. scrollWidth:获取对象的滚动宽度
5. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
6. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
7. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论