// 事件对象的相关属性
// e.target 触发事件的标签对象
// e.target支持所有标签对象的操作
// e.target.parentElement 直接父级标签对象
// e.target.parentNode 直接父级标签对象
// e.target.tagName 触发事件的标签对象名称 全大写英文字母
// 点击事件中,e事件对象中存储的坐标信息
// 键盘事件中,e事件对象中存储的按键信息
// 点击事件和键盘事件,e事件对象中存储的信息内容是不同的
// 只能获取鼠标点击的位置坐标,不能设定鼠标位置的坐标
// offsetX offsetY
// 触发事件的标签对象,左上角为坐标原点
// 在鼠标拖拽时,会有大问题
// 获取鼠标坐标时,原点,会改变
// 例如,在整个页面中拖拽div
// 起始时,坐标原点是 document 文档的左上角
// 当鼠标经过div时,坐标原点是 div 的左上角
// 获取的坐标数值不同,会造成 div 闪来闪去
// clientX clientY
// 视窗窗口,左上角为坐标原点
// pageX pageY
// HTML文档,左上角为坐标原点
// 当页面没有滚动时,两个坐标数据相同
// 当页面发生滚动时,两个坐标数据不同
var oDiv = document.querySelector('div');
oDiv.addEventListener('click' , function(e){
e = e || window.event;
console.log(e);
})
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
div{
100px;
height: 100px;
background: pink;
position: fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div></div>
<script src="./tools.js"></script>
<script>
// 通过点击鼠标,控制div的位置
// 让div位置与鼠标点击位置相同
// 获取鼠标点击时的坐标,设定为div标签定位的坐标数据
// 默认执行效果,定位之后,div的左上角与鼠标重合
// 如果需要其他位置与鼠标重合,就需要调整定位的数值
// 例如: 需要div中心位置与鼠标重合 : 定位数值 - div宽度高度的一半
var oDiv = document.querySelector('div');
// 给 document 整个文档添加点击事件
document.addEventListener('click' , function(e){
e = e || window.event;
// 如果需要div中心与鼠标位置重合
// 需要获取div的宽度,高度
// 注意:宽度高度,有px单位,要去掉
// var h = parseInt(myGetStyle(oDiv , 'height'));
// var w = parseInt(myGetStyle(oDiv , 'width'));
// 也可以通过标签占位,获取标签的宽度高度占位
// offsetHeight offsetWidth
// 直接获取数据数值,没有px单位的
var h = oDiv.offsetHeight;
var w = oDiv.offsetWidth;
console.log(h,w);
// 因为有页面滚动的问题
// 使用:clientX 和 clientY
// div中心与鼠标位置重合,需要再减去div宽度高度的一半
var top = e.clientY - h/2;
var left = e.clientX - w/2;
// 设定为 div 的定位数据 , 并且拼接px单位
oDiv.style.top = top + 'px';
oDiv.style.left = left + 'px';
})
</script>