js 事件对象

来源:互联网 发布:程序员离职证明 编辑:程序博客网 时间:2024/06/05 06:03
<script type="text/javascript">
window.onload = function(){
// 抓取元素
var box = document.getElementById("box");
// 添加点击事件
box.onclick = function(e){
// document.all判断是否是IE浏览器
// if(document.all){
//// ie获取事件对象的方法
// var e = window.event;
// }else{
//// 非ie获取事件对象的方法
// var e = e;
// }
// 短路写法获取事件对象
var e = e||window.event;
// 获得鼠标距离浏览器左侧的距离
// var left = e.clientX;
// 获得鼠标距离浏览器顶部的距离
// var top = e.clientY;


// 短路写法获取事件对象
var e = e||window.event;
// e.layerX非IE或点击位置距离事件源左侧的距离
// 注意:在非ie获取的鼠标位置的时候一定要给事件源添加定位属性
// e.offsetX 在IE下获得点击位置距离事件源左侧的距离
var left = e.offsetX||e.layerX;
var top = e.offsetY||e.layerY;
// 将位置放到title标签里
document.title = left+'|'+top;


}

}

</script>

////////html//////////

<div id="box">

</div>

////////////css////////////

<style type="text/css">
#box{
width: 200px;
height: 200px;
background: yellow;
margin-left: 500px;
margin-top: 200px;
position: relative;
}
</style>

原创粉丝点击