                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /DOM事件探秘

為什么一點擊標題，我的鼠標就跑到了瀏覽器左上角、、、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
?? ?*{
?? ??? ?margin:0;
?? ??? ?padding:0;
?? ??? ?text-decoration:none;
?? ??? ?font-size:20px;
?? ??? ?}
?? ?#tab{
?? ??? ?width:300px;
?? ??? ?height:250px;
?? ??? ?position:absolute;
?? ??? ?border:5px solid #eee;
?? ??? ?margin:100px 510px;
?? ??? ?box-shadow:0 0 20px #999;
?? ??? ?}
?? ?#title{
?? ??? ?position:absolute;
?? ??? ?width:100px;
?? ??? ?left:70px;
?? ??? ?border-bottom:1px solid #CCC;
?? ??? ?margin:10px 20px;
?? ??? ?padding:10px;
?? ??? ?}
?? ?#title p{
?? ??? ?display:block;
?? ??? ?text-align:center;
?? ??? ?}
</style>
<script type="text/javascript">
window.onload=drag;
function drag(){
?? var oTitle=document.getElementById("p");
?? // 拖曳
?? oTitle.onmousedown=fnDown;
}
function fnDown(event){
? event = event || window.event;
? var oDrag=document.getElementById('tab'),
????? // 光標按下時光標和面板之間的距離
????? disX=event.clientX-oDrag.offsetLeft,
????? disY=event.clientY-oDrag.offsetTop;
? // 移動
? document.onmousemove=function(event){
? ?? ?event = event || window.event;
? ?? ?fnMove(event,disX,disY);
? }
? // 釋放鼠標
? document.onmouseup=function(){
? ?? ?document.onmousemove=null;
? ?? ?document.onmouseup=null;
? }
}

function fnMove(e,posX,posY){
? var oDrag=document.getElementById('tab'),
????? l=e.clientX-posX,
????? t=e.clientY-posY,
????? winW=document.documentElement.clientWidth || document.body.clientWidth,
????? winH=document.documentElement.clientHeight || document.body.clientHeight,
????? maxW=winW-oDrag.offsetWidth-10,
????? maxH=winH-oDrag.offsetHeight;
? if(l<0){
??? l=0;
? }else if(l>maxW){
??? l=maxW;
? }
? if(t<0){
??? t=10;
? }else if(t>maxH){
??? t=maxH;
? }
? oDrag.style.left=l+'px';
? oDrag.style.top=t+'px';
}
</script>
</head>
?? ?
<body>
<div id="tab">
?? ?<div id="title" class="title">
?? ??? ?<p id="p" class="p">QQ登陸</p>
??? </div>
</div>
</body>
</html>

fluent

2015-08-02

源自：DOM事件探秘 4-1

關注問題我要回答

1354

操作

收起

3 回答

A潛水的魚
2016-01-14

還有一個方法是，那就是將function fnMove(e,posX,posY){oDrag.style.left=l+'px';oDrag.style.top=t+'px';}換成l=e.clientX-posX-200;t=e.clientY-posY-200;我試了半天才發現你的問題就是和你設置的margin有關。希望對你有幫助。