87,990
社区成员
发帖
与我相关
我的任务
分享关于javascript中document的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zong{
width:300px;
height: 260px;
border-radius:10px;
background-color: #6495ED;
}
#tou{
height: 40px;
border-radius:10px ;
background-color: #00008B;
}
span{
margin-left: 15px;
color: white;
line-height: 40px;
user-select: none;
}
</style>
<script>
/*窗口拖动和关闭, 只可以点击紫色区域才可以拖拽 窗口, 点击关闭按钮就关闭窗口 */
var dragging = false;
var test;
var mouseY;
var mouseX;
//定义css
//初始化
window.onload = function(){
//绑定拖拽元素
zong.style.position = "relative";
zong.style.top = "0px";
zong.style.left = "0px";
var tou = document.getElementById("tou");
var p = document.getElementById("p");
p.onclick=function (){
zong.style.display="none";
}
//鼠标在元素内按下触发down事件
tou.onmousedown = function ()
{
document.onmousedown=function(event){
event = event || window.event;
mouseX = parseInt(event.clientX);
mouseY = parseInt(event.clientY);
objY = parseInt(zong.style.top);
objX = parseInt(zong.style.left);
}
document.onmousemove=function(event){
event = event || window.event;
var x,y;
y = event.clientY - mouseY + objY;
x = event.clientX -(mouseX - objX) ;
zong.style.top= y + "px";
zong.style.left = x + "px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
</script>
</head>
<body>
<div id="zong" >
<div id="tou">
<span id="p"> 关闭</span>
</div>
</div>
</body>
<html>
这是一个实现窗口拖拽的题目，为什么我把 tou.onmousedown里面的document换成tou的时候无法实现目的，在这里面document又代表的谁？先谢谢各位老铁
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zong{
width:300px;
height: 260px;
border-radius:10px;
background-color: #6495ED;
}
#tou{
height: 40px;
border-radius:10px ;
background-color: #00008B;
}
span{
margin-left: 15px;
color: white;
line-height: 40px;
user-select: none;
}
</style>
<script>
/*窗口拖动和关闭, 只可以点击紫色区域才可以拖拽 窗口, 点击关闭按钮就关闭窗口 */
var dragging = false;
var test;
var mouseY;
var mouseX;
//定义css
//初始化
window.onload = function(){
//绑定拖拽元素
zong.style.position = "relative";
zong.style.top = "0px";
zong.style.left = "0px";
var tou = document.getElementById("tou");
var p = document.getElementById("p");
p.onclick=function (){
zong.style.display="none";
}
//鼠标在元素内按下触发down事件
tou.onmousedown = function ()
{
document.onmousedown=function(event){
event = event || window.event;
mouseX = parseInt(event.clientX);
mouseY = parseInt(event.clientY);
objY = parseInt(zong.style.top);
objX = parseInt(zong.style.left);
}
document.onmousemove=function(event){
event = event || window.event;
var x,y;
y = event.clientY - mouseY + objY;
x = event.clientX -(mouseX - objX) ;
zong.style.top= y + "px";
zong.style.left = x + "px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
</script>
</head>
<body>
<div id="zong" >
<div id="tou">
<span id="p"> 关闭</span>
</div>
</div>
</body>
<html>
这是一个实现窗口拖拽的题目，为什么我把 tou.onmousedown里面的document换成tou的时候无法实现目的，在这里面document又代表的谁？先谢谢各位老铁
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-08-22
- 打赏
- 举报
document是整个html页面文档对象，onmousemove事件绑定在document上时鼠标在页面上任何地方移动都会触发事件。
换成tou后鼠标处在div之外就不会触发事件了。
