鼠标位置距浏览器窗体距离


代码例如以下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style type="text/css">
#test_div {
	width:400px;
	height: 400px;
	background-color: red;
}
</style>
	</head>
	<body>
	<div id="test_div"></div>
	</body>
<script type="text/javascript">
	function mousePos(e){
		e=e||window.event;
		var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome
		var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
		var x=e.pageX||(e.clientX+scrollX);//兼容火狐和其它浏览器
		var y=e.pageY||(e.clientY+scrollY);
		console.log(x,y);
		return {x:x,y:y};
	}
	var test=document.querySelector("#test_div");
	test.οnclick=function(e){
		mousePos(e);
	}
</script>
</html>

当中的document.documentElement.scrollLeft和document.body.scrollLeft各自是ie和chrome的方法,而火狐中的pageX能够直接获取滑动的距离。

代码位置例如以下:

http://runjs.cn/code/6a8wblce



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值