<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置</title>
<style>
#info{
100px;
height:100px;
background:red;
position:absolute;
top:0;
left:0;
}
</style>
<script>
window.onload = function(){
document.onclick = clickwhere;
}
function clickwhere(evt){
evt = evt || window.event;
var x =0;
var y = 0;
if (evt.pageX){
x = evt.pageX;
y = evt.pageY;
}else if(evt.clientX){
var offsetX = 0;
var offsetY = 0;
if(document.documentElement.scrollleft){
offsetX = document.documentElement.scrollLeft;
offsetY = document.documentElement.scrollTop;
}else if(document.body){
offsetX = document.body.scrollLeft;
offsetY = document.body.scrollTop;
}
x = evt.clientX + offsetX;
y = evt.clientY + offsetY;
}
var style = "left:" +x + "px;top:"+ y + "px";
var box = document.getElementById("info");
box.setAttribute("style",style);
}
</script>
</head>
<body>
<div id = "info">
</div>
</body>
</html>