层拖拽,事件冒泡

arrowwhite 2011-06-08 01:18:34

层拖拽,代码如下,三个问题求解
<!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>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
function fDragging(obj, e, limit){
if(!e) e=window.event;
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);

var x_=e.clientX-x;
var y_=e.clientY-y;

document.addEventListener('mousemove', inFmove, true);
document.addEventListener('mouseup', inFup, true);

e.stopPropagation()
e.preventDefault()

function inFmove(e){
var evt;
if(!e)e=window.event;

if(limit){
var op=obj.parentNode;
var opX=parseInt(op.style.left);
var opY=parseInt(op.style.top);

if((e.clientX-x_)<0) return false;
else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;

if(e.clientY-y_<0) return false;
else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
//status=e.clientY-y_;
}

obj.style.left=e.clientX-x_+'px';
obj.style.top=e.clientY-y_+'px';

e.stopPropagation()
} // shawl.qiu script
function inFup(e){
var evt;
if(!e)e=window.event;

document.removeEventListener('mousemove', inFmove, true);
document.removeEventListener('mouseup', inFup, true);

}

}
//]]>
</script>
</head>
<body>
<div style=" border:1px dashed blue; width: 760px; height:600px; text-align:center; position:absolute; left:100px; top: 10px;"> this parent

<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" onmousedown="fDragging(this, event, true);">
element <br/>
dragging compatibility for IE, Opera, Firefox.
</div>
<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" onmousedown="fDragging(this, event, true);">
element 1<br/>
dragging compatibility for IE, Opera, Firefox.
</div>
<div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px;" onmousedown="fDragging(this, event, false);">
<img src="http://t2.baidu.com/it/u=2591067271,1965615916&fm=0&gp=0.jpg" width="100%" height="100%" alt="图片地址错误" />
</div>
</div>
</body>
</html>
1:为什么不使用 e.stopPropagation() , e.preventDefault()会造成图片层无法拖动,无法拖动的原因是什么?
2 e.stopPropagation()在这里的作用是什么,我理解是停止上级元素相同事件的触发,可上级元素没有onmousedown事件啊?
3 e.preventDefault()是阻止默认行为的发生,在这里他阻止了什么默认行为??

...全文