JS事件冒泡与鼠标拖拽

1、事件冒泡

<div style="background:#CCC;" onclick="alert(this.style.background);"> <div style="background:green;" onclick="alert(this.style.background);"> <div style="background:red;" onclick="alert(this.style.background);"> </div> </div> </div>

事件冒泡原理：子节点的操作会影响父级乃至更上一级。 如上图所示，三层div，点击灰色层弹出“灰色”，点击绿色层弹出“绿色”后弹出“灰色”，点击红色层弹出“红色”后弹出“绿色”最后再弹出“灰色”。 对里层的div操作总是会影响外层，这就是事件冒泡。 那我们怎么预防事件冒泡呢？很简单（cancelBubble），如下面代码：

object.onclick = function(ev) { //兼容性处理 var oEvent=ev || event; //代码块 oEvent.cancelBubble=true; }

2、鼠标拖拽

鼠标拖拽原理：当鼠标按下左键时，获取鼠标的坐标，用鼠标坐标减去盒子对应页面的左边和上边的距离，求出鼠标在盒子上的相对位置，然后鼠标拖动时，再用当前鼠标的坐标减去鼠标在盒子上的相对位置。简单来说，就是相对位置不变。代码如下：

<script type="text/javascript"> window.onload=function(){ //定义两个变量存储鼠标在盒子上的相对位置 var disX=0; var disY=0; oBox.onmousedown=function(ev){ //鼠标按下瞬间获取相对距离disX，disY var oEvent=ev || event; disX=oEvent.clientX-oBox.offsetLeft; disY=oEvent.clientY-oBox.offsetTop; document.onmousemove=function(ev){ //鼠标滑动的时候，用相对距离重新计算新的top和left值 var oEvent=ev || event; oBox.style.left=oEvent.clientX-disX+'px'; oBox.style.top=oEvent.clientY-disY+'px'; } document.onmouseup=function(){ //鼠标弹起，结束拖拽行为 document.onmousemove=null; document.onmouseup=null; } //alert(disX); return false; } } </script>