`

JS 鼠标相对document的坐标以及HTML元素相对document的坐标

阅读更多

	Number.prototype.NaN0 = function(){
		return isNaN(this)?0:this;//如果this为非数字返回0,否则返回数字
	}
//获取鼠标相对document的坐标
	function getMouseCoord(evt){
		if(evt.pageX && evt.pageY)
			return {x:evt.pageX,y:pageY};
		return {
			x:evt.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:evt.clientY + document.body.scrollTop - document.body.clientTop
		};
	}

//获取HTML元素相对document的坐标
	function getPosition(ele){
		var x = ele.offsetLeft+(ele.curentStyle?(parseInt(ele.curentStyle.borderLeftWidth).NaN0()):0);
		var y = ele.offsetTop+(ele.curentStyle?(parentInt(ele.curentStyle.borderTopWidth).NaN0()):0);
		while(ele.offsetParent){
			ele = ele.offsetParent;
			x+=ele.offsetLeft+(ele.curentStyle?(parseInt(ele.curentStyle.borderLeftWidth).NaN0()):0);
			y+=ele.offsetTop+(ele.curentStyle?(parentInt(ele.curentStyle.borderTopWidth).NaN0()):0);
		}
		return {x:x,y:y};
	}

//获取鼠标相对与点击空件上的坐标
	function getMouseOffset(target,ev){
		var elePosition = getPosition(target);
		var mouseCoord = getMouseCoord(ev);
		return {x:mouseCoord.x-elePosition.x,y:mouseCoord.y-elePosition.y};
	}
 
分享到:
评论
1 楼 jidifeiyan 2010-11-16  
今天也碰到了这个问题,看了这篇文章解决了,不错。

相关推荐

    javascript获得对象的坐标

    javascript获得对象的坐标,javascript获得对象的坐标,

    js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent...

    js获得光标坐标

    很好的兼容了IE、Chrome、火狐等多种主流浏览器,轻松获得指定控件光标所在位置的坐标。 用法: var elem = document.getElementById(控件id); var p = kingwolfofsky.getInputPositon(elem); p.left;//获得指定...

    【JavaScript源代码】javascript实现跟随鼠标移动的图片.docx

     本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码,供大家参考,具体内容如下 实现思路 1、给 document 绑定 mousemove 事件,获取鼠标的坐标:e.pageX ,e.pageY 2、将图片设置成绝对定位:...

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

    例如这次的,页面JS光标/鼠标坐标,你也许问着有什么用,百度统计中有个热点统计图,这下清楚明白了吧。 好了,上肉: 功能:获取光标的像素坐标 代码如下: <html> <head> [removed] function ...

    Javascript中找到子元素在父元素内相对位置的代码

    代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == “string”) ? document.getElementById(element) : element; if (el[removed] === null || el.style...

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

    本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法。分享给大家供大家参考。具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!...

    JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)

    还好网上什么都有,上网找了一个浏览器兼容性最佳的函数,经测试... return { x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, y:e.clientY+document.body.scrollTop+document.document

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    4.3 坐标变换 118 4.4 控制叠加风格 123 4.5 控制填充风格 124 4.6 位图处理 128 4.7 输出位图 132 4.8 动画制作 133 4.9 本章小结 136 第5章 HTML 5的多媒体支持 137 5.1 使用audio和video元素 138 5.2 ...

    element-from-absolute-point:支持使用页面的绝对 `X``Y` 坐标查找元素,特别是当元素当前在页面上不可见时

    JavaScript document.elementFromAbsolutePoint() 这个小库增加了使用页面的绝对X / Y坐标查找元素的支持,尤其是当元素当前在页面上不可见时。 本机document.elementFromPoint()只会返回相对于当前可见视口的元素...

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

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

    javascrtpt 实现窗口拖拽、移动功能、显示坐标

    javascrtpt 实现窗口拖拽、移动功能、显示坐标代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head runat...

    javascript获取鼠标点击元素对象(示例代码)

    IE:var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标。 HTML:onclick=”gj(event)” JS: 代码如下:function gj...

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

     // 鼠标坐标 function mousePosition(ev) { return { x : ev.clientX + document.documentElement.scrollLeft – document.documentElement.clientLeft, y : ev.clientY + document.documentElement.scrollTop...

    【JavaScript源代码】JavaScript实现移动小精灵的案例代码.docx

    JavaScript实现移动小精灵的案例代码  前言 提示: 今天学习了一个js的小案例,来和可乐一起学习探讨下吧 skr~ 效果: 提示:以下是本篇文章正文内容,下面案例可供参考 一、元素偏移量是什么? offset :中文...

    javascript函数的解释

    56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1 57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you< /em>",则innerHTML的值就是:how are <em>you 58.innerTEXT的值和上面的...

    JS大全 web编程

    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量  以上主要指IE之中,FireFox差异如下: IE6.0、FF1.06+: clientWidth = width + padding clientHeight = height + ...

    通过JS 获取Mouse Position(鼠标坐标)的代码

    昨天写的脚本在获取鼠标位置的时候有些问题。在IE中始终当有滚动条的时候,发现document.body.scrollTop并没有起到作用。后来在google中搜索到一篇文章Mouse Cursor Position,详细介绍了浏览器鼠标定位的问题。各个...

    JS鼠标拖拽实例分析

    本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考,具体如下: JS代码: [removed] [removed]=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=...

Global site tag (gtag.js) - Google Analytics