坐标位置

<span style="font-size:18px;">//客户区坐标的位置(表示鼠标指针在视口的水平和垂直坐标)
//不包括浏览器上方的客户区clientX和clientY
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
	event=EventUtil.getEvent(event);
	alert("Client coordinates:"+event.clientX+","+event.clientY);
});

</span>
<span style="font-size:18px;">
//页面坐标位置
//没有滚动的情况下pageX和pageY与clientX和clientY相等
var div=document.getElementById("mtDiv");
EventUtil.addHandler(div,"click",function(event){
	event=EventUtil.getEvent(event);
	alert("Page coordunater:"+event.pageX+","+event.pageY);
})</span>
<span style="font-size:18px;">
//IE8之前不支持事件对象上的页面坐标,所以用到混杂模式和标准模式中的
//scrollLeft和srcollTop
var div=document.getElementById("maDiv");
EventUtil.addHandler(div,"click",function(event){
	event=EventUtil.getEvent(event);
	pageX=event.pageX;
	pageY=event.pageY;


	if(pageX==underfined){
		pageX=event.clientX+(document.body.scrollLeft ||document.documentElement.scrollLeft);
	}


	if(pageY==underfined){
		pageY=event.clientY+(document.body.scrollTop ||document.documentElement.scrollTop);
	}
	alert("Page coordinates:"+pageX+","+pageY);
})

</span>
<span style="font-size:18px;">
//屏幕坐标位置
//screenX和scrennY可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息
var div=document.getElementById("maDiv");
EventUtil.addHandler(div,"click",function(event){
	event=EventUtil.getEvent(event);
	screenX=event.screenX;
	screenY=event.screenY;
	alert("Screen coordinates:"+screenX+"."+screenY);
})</span>
<span style="font-size:18px;">
//向左的偏移量
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
//向上的偏移量
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
}</span>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值