JS事件冒泡与鼠标拖拽

来源：互联网发布：nginx反向代理jenkins 编辑：程序博客网时间：2024/05/09 18:35

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>

0 0