这篇博客介绍了一个JavaScript实例，通过监听鼠标点击事件，获取点击位置坐标，并将指定的红色方块元素移动到这个位置。示例代码中，当用户点击页面时，id为'info'的红色方块会根据鼠标点击的屏幕位置进行动态定位。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置</title>
<style>
#info{
width: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>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
