您的位置：首页 > Web前端 > JavaScript

Js中event对象的x,clientX,offsetX区别

2010-01-16 09:43 447 查看
Js中event对象的x,clientX,offsetX三者主要区别含义如下：

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。

clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。

offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。

screenX:相对于用户屏幕。

可从下边的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<body onmousemove=fun() style="background:#ff4400" mce_style="background:#ff4400">
<div style="width:100%;height:100%;background:#e9ffe9;">
<table border=1 cellpadding=15 cellspacing=15 style="position:relative;top:20;left:20;background:green;">
<tr><td>
<div onclick="show()" style="background:#0b9cfd;cursor:hand;color:;" mce_style="background:#0b9cfd;cursor:hand;color:;">
Click here to show
</div>
</td></tr>
</table>

<div id=cs style="width:200px;margin-top:20%;background:#ff4400;color:#ffffff;"></div>
</div>
<mce:script type="text/javascript"><!--
function show(){
alert("window.event.x:"+window.event.x+"/nwindow.event.y:"+window.event.y+"/nevent.clientX:"+event.clientX+"/nevent.clientY:"+event.clientY+"/nevent.offsetX:"+event.offsetX+"/nevent.offsetY:"+event.offsetY+"/nwindow.event.screenX:"+window.event.screenX+"/nwindow.event.screenY:"+window.event.screenY+"/nwindow.screen.width:"+window.screen.width+"/nwindow.screen.height:"+window.screen.height);
}
function fun(){
document.getElementById("cs").innerHTML="window.event.x:"+window.event.x+"<br>window.event.y:"+window.event.y;
}
// --></mce:script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航