<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript中事件及定位浏览器的差异</title>
<style type="text/css">
*{margin:0; padding:0;}
#oDiv{
height:200px;
width:200px;
background:Red;
position:absolute;
left:200px;
top:200px;
margin:5px;
border:5px solid #f60;
}
</style>
<script type="text/javascript">
/*
var str="This is a RegExp string test, yes it is ";
var reg=/is/;
alert(str.match(reg)); //is
*/
window.onload=function(){
var oDiv=document.getElementById("oDiv");
if(document.all){
alert("Div元素的客户端高度和宽度:clientWidth|"+oDiv.clientWidth+",clientHeight|"+oDiv.clientHeight); //内容区域，不包含边框
alert("Div元素的客户端高度和宽度:offsetWidth|"+oDiv.offsetWidth+",offsetHeight|"+oDiv.offsetHeight); //加上边框
alert("Div元素的距离左侧和右侧的距离:offsetLeft|"+oDiv.offsetLeft+",offsetTop|"+oDiv.offsetTop); //应该是应IE的定位问题而有的，IE有2px的差距
}
oDiv.onclick=function(e){
e=e||window.event;
if(document.all){ //IE浏览器
alert("触发事件的对象:"+e.srcElement.id);
//这里你可以看成是相对于浏览器的可视区域
//注意：IE的client是相对于浏览器的可视区域（不会加上滚动条的左和上）（而FF的pageX|Y可以看成是相对于body的，含滚动条）（兼容处理要考虑的）
alert("事件发生时光标相对客户端区域的位置:clientX|"+e.clientX+",clientY|"+e.clientY);
//这里只是单单相对于该元素的哦，如，该DIV是200长宽，所以我在正中点是 100和100左右
//另外一点要注意，IE的 offset是相对于内容区域的（不包括边框），所以如果有边框的话，则可能为负数(如在边框上点击)（兼容处理要考虑的）
alert("光标相对于引起事件对象的位置：offsetX|"+e.offsetX+",offsetY|"+e.offsetY);
alert("光标相对屏幕的位置:screenX|"+e.screenX+",screenY|"+e.screenY);
//取消浏览器的默认行为
e.returnValue=false;
//取消冒泡
e.cancelBubble;
}
else //标准（主要是FireFox)
{
alert("触发事件的对象:"+e.target.id);
//这里你可以看成是相对于body（即使有滚动条且已经滚动，它的值不变）
alert("事件发生时光标相对body区域的位置:pageX|"+e.pageX+",pageY|"+e.pageY);
//这里只是单单相对于青元素的哦，如，该DIV是200长宽的，所以我在正中点是 100和100左右
//FF的layer是相对于元素的左上角（不包含margin，包含border的值） (还有点要注意要是有定位的元素，即设置了position，否则就相对于body)
alert("光标相对于引起事件对象的位置：layerX|"+e.layerX+",layerY|"+e.layerY);
alert("光标相对屏幕的位置:screenX|"+e.screenX+",screenY|"+e.screenY);
//取消浏览器的默认行为
e.preventDefalut();
//取消冒泡
e.stopPropgation();
}
}
}
</script>
</head>
<body style="height:1000px">
<div id="oDiv"></div>
</body>
</html>
