最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript 获取鼠标位置坐标(点击位置)代码
时间:2013-08-05 编辑:简简单单 来源:一聚教程网
例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) { |
相对浏览器窗口
代码如下 | 复制代码 |
function getMousePos(event) { |
相对文档
代码如下 | 复制代码 |
function getMousePos(event) { |
不同浏览器中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 属性指定的父坐标的计算顶端位置
-
上一个: WordPress给置顶文章添加更新时间
-
下一个: js 计算字符串长度/判断空的简单方法
相关文章
- JavaScript获取ul中li个数的方法 03-29
- python获取Ip归属信息的例子 10-28
- javascript通过两点经纬度获取距离例子 10-24
- Javascript获取星座名称与生肖的代码 11-15
- JavaScript获取上月的第一天/最后一天例子 09-13
- javascript中获取当月的最后一天代码 06-06