您的位置：首页 > 其它

浏览器的一些位置

2012-08-16 10:47 274 查看

首先event.clientX,event.clientY（解释可视区域显示坐标）,event.screenX,event.screenY（相对屏幕左上角的坐标）是符合w3c标准的，只是在ie和moz、chrome等非ie内核的浏览器有略微的差别，先看一个例子

代码

<!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>
<title>无标题页</title>
<style type="text/css">
body{margin:0;padding:0;}
.block{width:300px;height:300px; background:#dfdfdf; text-align:center;}
.block div{width:150px;height:150px; background:#666;}
.block div div{width:100px;height:100px; background:#fe0;}
</style>
</head>
<body onclick="alert('body')">
<div id="d1" class="block">
<div id="d2" style=" position:relative;">
<div id="d3"></div>
</div>
</div>
<input id="btn" type="text" />
 
 
 
<script language="javascript" type="text/javascript">
//golobal
_w=window;
_d=document;
_isie=!!_w.ActiveXObject;
_isie6=_isie&&!_w.XMLHttpRequest;
function r_e(a){
return _isie?(window.event?window.event:null):a;
}
function addEvent(obj,type,fun,bol){
_isie?obj.attachEvent("on"+type,fun):obj.addEventListener(type,fun,bol);
}
function delEvent(obj,type,fun,bol){
_isie?obj.detachEvent("on"+type,fun):obj.removeEventListener(type,fun,bol);
}
function $(eleid){
return (typeof eleid=='object')?eleid:_d.getElementById(eleid);
}

function getMouseXY(ev){
//alert(ev);
if(!_isie){
return {x:ev.pageX,
y:ev.pageY
};
}else{
var sleft=!parseInt(document.body.scrollLeft)?document.documentElement.scrollLeft-document.documentElement.clientLeft:(document.body.scrollLeft-document.body.clientLeft);
var stop=!parseInt(document.body.scrollTop)?document.documentElement.scrollTop-document.documentElement.clientTop:(document.body.scrollTop-document.body.clientTop);
return {
x:event.clientX + sleft - document.body.clientLeft,
y:event.clientY + stop - document.body.clientTop
};
}
}

function ll2(event){
//alert(event);
var xy=getMouseXY(event);
$("btn").value="x="+xy.x+",y="+xy.y;
}

addEvent($("d1"),'mousemove',function(event){var s=event;ll2(s);},false);

</script>












































































</body>
</html>

接下来如果你像了解event.x(ie),layerX,offsetLeft,offsetY请转（这几篇文章不错，其实关键是哪个图看懂了基本上都没问题了）

www.aspxcs.net/HTML/164930449.html

www.w3school.com.cn/htmldom/dom_obj_event.asp

www.jb51.net/article/22507.htm

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航