javascript获取鼠标当前位置(兼容IE和firefox)

 
更多

用 JS 计算鼠标在页面上的位置并非难事,但由于IE和Firefox对获取鼠标当前位置的方法不同(IE为event.x|y,FF为event.pageX|Y),一般采用的是event.clientX代替两者,但当出现滚动条时event.clientX在IE和FF中的表现会略有不同。因此 js 获取鼠标当前位置也因各浏览器的区别而有所不同。下面介绍一种通用的获取鼠标在页面上的位置的方法。

/**
* 获取鼠标在页面上的位置
* @param ev		触发的事件
* @return		x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
*/
function getMousePoint(ev){
	//定义鼠标在视窗中的位置
	var point={
		x:0,
		y:0
	};
	//如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
	if(typeof window.pageYOffset!='undefined'){
		point.x=window.pageXOffset;
		point.y=window.pageYOffset;
	}
	//如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
	//IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
	else if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
		point.x=document.documentElement.scrollLeft;
		point.y=document.documentElement.scrollTop;
	}
	//如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
	else if(typeof document.body!='undefined'){
		point.x=document.body.scrollLeft;
		point.y=document.body.scrollTop;
	}
	//加上鼠标在视窗中的位置
	point.x+=ev.clientX;
	point.y+=ev.clientY;
	//返回鼠标在视窗中的位置
	return point;
}

demo 展示

打赏

本文固定链接: https://www.cxy163.net/archives/4472 | 绝缘体

该日志由 绝缘体.. 于 2013年05月23日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: javascript获取鼠标当前位置(兼容IE和firefox) | 绝缘体
关键字: , , , ,

javascript获取鼠标当前位置(兼容IE和firefox):等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter