#6.18
本节仍仍为鼠标事件的样例——随鼠标点击而移动div块
具体理论相关标注在代码中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>随动div</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div= document.querySelector('div'); //选中页面元素:div标签
var flag =false; //检测是否鼠标按下的开关
//此处的document而不是div,防止鼠标只能局限在div中按下才可以随动
//换言之写成document就可以在整个网页中随意点击,就可以是div块到它该到的位置
document.onmousemove=function(){ //鼠标移动触发
if(flag==true){
div.style.left=event.clientX-50+'px'; //同滚动条笔记所讲
div.style.top=event.clientY-50+'px';
}
}
document.onmousedown=function(){ //鼠标按下
flag=true;
}
document.onmouseup=function(){ //鼠标松开
flag=false;
}
</script>
</body>
</html>