事件绑定高级应用

Posted distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件绑定高级应用相关的知识，希望对你有一定的参考价值。

 

 1 addEvent(document.getElementById(\'d1\'),\'click\', function(){alert(\'1\');})
 2 
 3 /*绑定事件的函数封装*/
 4 function addEvent(obj, otype, fn ){
 5       if(obj.attachEvent)
 6       {
 7             obj.attachEvent(\'on\'+otype, fn);
 8           }
 9        else{
10           obj.addEventListener(otype,  fn, false);
11            }
12            }
13       }

 

    function(){alert(\'a\');stopBubble(this.ev)}
    /*阻止冒泡函数封装*/
    function stopBubble(ev){
        var e=window.event||event;
        if(e.stopPropagation)
        {
            e.stopPropagation();
            }
        else{
            window.event.cancelBubble=true;
            }
        
        };

 

   事件绑定

         IE方式

              attachEvent(事件名称，函数)，绑定事件处理函数

              datachEvent（事件名称，函数），解除绑定

        DOM方式

              addEventListener（事件名称，函数，捕获）

               removeEventListener(事件名称，函数，捕获)

            何时使用时间绑定

            绑定事件和this

            绑定匿名函数，会无法删除

<!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>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(\'btn1\');
    
    /*oBtn.onclick=function ()
    {
        alert(this);
    };*/
    
    //IE    事件绑定        this->window
    /*oBtn.attachEvent(\'onclick\', function (){
        alert(this==window);
    });*/
    
    //FF
    oBtn.addEventListener(\'click\', function (){
        alert(this);
    }, false);
};
</script>
</head>

<body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>
绑定IEthis问题

 

高级拖拽

         复习拖拽原理

                距离不变

                三个事件， down move up

                封装成函数

         限制范围

                  对位置进行判断

                          例1 不能拖出窗口的Div

                          例2 不能拖出指定对象的div

                     磁性吸附

高级拖拽（2）

      图片拖拽

                  阻止默认事件

       文字选中

                 阻止默认事件

                ie下拖动问题

                       事件捕获

       碰撞检测

               碰撞检测原理-----九宫格

                拖拽中的碰撞检测

高级拖拽（3）

               与DOM的配合

                      带框的拖拽

                       保留原有的位置拖拽

                弹出层

                       拖拽改变Div的大小

自定义滚动条

     拖拽

           只有横向的拖拽

           限制范围------范围的大小

           计算比例---当前值/最大值

控制其他对象，

            控制物体的大小

            控制物体的透明度

            控制文字的滚动

鼠标滚轮

            鼠标滚轮事件

                 事件

                       mousewheel

                      DOMMousescroll

                      》DOM事件 只能绑定，阻止默认事件--preventDefault

                 属性

                     IE下  wheelDelta

                     DOM下  detail

                   应用到自定义滚动条---给谁加事件

<!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>
#div1 {width:200px; height:200px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动的索引值</title>
<script>
//处理函数监听兼容事件
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent(\'on\'+sEvent, fn);
        }
    else
    {
        obj.addEventListener(sEvent, fn, false);
        }
}
window.onload=function()
{
    var oDiv=document.getElementById(\'div1\');
        myAddEvent(oDiv, \'mouseWheel\', onMouseWheel);
        myAddEvent(oDiv, \'DOMMouseScroll\', onMouseWheel);

function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        //iE    下付，上正
        //wheelDalta
        
        //ff
        //detail 下正， 上负
        
        var bDown=true;
        alert(bDown);
        
        if(oEvent.wheelDelta)
        {
            if(oEvent.wheelDelta<0)
            {
                bDown=true;
                }
            else{
                bDown=false;
                }
            }
         else
         {
             if(oEvent.detail>0)
             {
                 bDown=true;
                 }
             else
             {
                 bDown=false;
                 }
             }
             alert(bDown);
        }
        myAddEvent(oDiv, \'mouseWheel\', onMouseWheel);
        myAddEvent(oDiv, \'DOMMouseScroll\', onMouseWheel);
    }
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
滚动索引设置
<!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>
#div1 {width:200px; height:200px; background:red;}
</style>
<script>
//捕获函数处理兼容
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        
        obj,attachEvent(\'on\'+sEvent, fn);
        }
    else
    {

        obj.addEventListener(sEvent, fn, false);
        }
}
window.onload=function()
{
    var oDiv=document.getElementById(\'div1\');
    function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        var bDown=true;
        //上下索引值兼容
        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        //处理索引值
        if(bDown)
        {
            oDiv.style.height=oDiv.offsetHeight+10+\'px\';
            }
        else{
            oDiv.style.height=oDiv.offsetHeight-10+\'px\';
            }
        //阻止默认事件兼容
        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
            }
        return false;
        }
    myAddEvent(oDiv, \'mousewheel\', onMouseWheel);
    myAddEvent(oDiv, \'DOMMouseScroll\', onMouseWheel);
    }
    
</script>
</head>

<body><div id="div1"></div>
</body>
</html>
滚动事件处理
<!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>滚动条2</title>
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:300px; height:300px; filter:alpha(opacity:0); opacity:0; background:yellow; }
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById(\'div1\');
    var oParent=document.getElementById(\'parent\');
    var oDiv2=document.getElementById(\'div2\');
    oDiv.onmousedown=function(ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        
        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            if(l<0)
            {
                l=0
                }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWdith;
                }
                oDiv.style.left=l+\'px\';
            //算速度    
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            oDiv2.style.filter=\'alpha(opacity:\'+100*scale+\')\';
            oDiv2.style.opacity=scale;
            document.title=scale;
            };
        document.onmouseup=function()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        }
        };
    
</script>
</head>

<body><div id="parent">
    <div id="div1">
</div>
</div>
    <div id="div2">
    </div>
</body>
</html>
滚动改变亮度
<!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" />
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:0px; height:0px; background:yellow;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById(\'div1\');
    var oParent=document.getElementById(\'parent\');
    var oDiv2=document.getElementById(\'div2\');
    oDiv.onmousemove=function(ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            if(l<0)
            {
                l=0
                }
            else if(l>oParent.offsetWidth-oDiv.offsetWidth)
            {
                l=oParent.offsetWidth-oDiv.offsetWdith;
                }
                oDiv.style.left=l+\'px\';
            //算速度    
            var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
            oDiv2.style.width=scale*300+\'px\';
            oDiv2.style.height=scale*300+\'px\';
            document.title=scale;
            }
                    document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
        }
    }
</script>
<title>滚动条</title>
</head>

<body><div id="parent">
    <div id="div1">
</div>
</div>
    <div id="div2">
    </div>
</body>
</html>
滚动改变大小
<!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>
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:200px; height:300px; border:1px solid black; position:relative; overflow:hidden;}
#div3 {position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function myAddEvent(obj, sEvent, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent(\'on\'+sEvent, fn);
    }
    else
    {
        obj.addEventListener(sEvent, fn, false);
    }
}

window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    var oParent=document.getElementById(\'parent\');
    var oDiv2=document.getElementById(\'div2\');
    var oDiv3=document.getElementById(\'div3\');
    
    function onMouseWheel(ev)
    {
        var oEvent=ev||event;
        var bDown=true;
        
        bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
        
        if(bDown)
        {
            setLeft(oDiv.offsetLeft+10);
        }
        else
        {
            setLeft(oDiv.offsetLeft-10);
        }
        
        if(oEvent.preventDefault)
        {
            oEvent.preventDefault();
        }
        
        return false;
    }
    
    myAddEvent(oParent, \'mousewheel\', onMouseWheel);
    myAddEvent(oParent, \'DOMMouseScroll\', onMouseWheel);
    myAddEvent(oDiv2, \'mousewheel\', onMouseWheel);
    myAddEvent(oDiv2, \'DOMMouseScroll\', onMouseWheel);
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            
            setLeft(l);
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
    
    function setLeft(l)
    {
        if(l<0)
        {
            l=0;
        }
        else if(l>oParent.offsetWidth-oDiv.offsetWidth)
        {
            l=oParent.offsetWidth-oDiv.offsetWidth;
        }
        
        oDiv.style.left=l+\'px\';
        var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
        
        oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+\'px\';
        
        document.title=scale;
    }
};
</script>
</head>

<body>
<div id="parent">
    <div id="div1">
    </div>
</div>
<div id="div2">
    <div id="div3">
         所有可能让你变得更好的努力，在一开始就被你扼杀了。如果你一直没有尝试迈出第一步，怎么可能掌握栽培绿植的方法，怎么可能享受到跑步之后大汗淋漓的酣畅……难道害怕自己没有经验，害怕中途突然出现的变故，害怕事到最后依然不尽如人意的结局，或者仅仅是怕输、怕被嘲笑，就不敢尝试了吗？
  我们每个人都有自己的梦想，都有想要达成的目标，都有希望成为的样子，但在这个过程中，总会出现各种干扰。与其畏缩不前，何不趁青春年少，大胆一试？许多事情，不是因为做不到才让人失去了信心，而是因为失去了信心，才变得难以做到
  想起之前看到杨澜在书中写到她对迈克尔·乔丹的采访，这位被誉为“飞人”的伟大运动员说：“我起码有9000次投球不中，我输过不下300场比赛，有26次人们期待我投入制胜一球而我却失误了。我的一生中失败一个接着一个，这就是为什么我能够成功。我从未害怕过失败，我可以接受失败，但我不能接受没有尝试。”乔丹说，面对所有的伤痛和困境，他的法宝就是父母从小教育他的那句话：“谁都会遇到倒霉事，你的任务是想办法把坏事变成好事。
  人这一生总有很多的残缺，我不是为了追求完美而活着，我是为了弥补残缺而更好的活着。为了自己，为了父亲，也为了很多很多的关心我的人。

　　人这一生总会遇到很多的不如意，我不是为了逃避而活着，我是为了好好地面对而更好的活着。

　　人这一生总是会让命运作弄，一次又一次，周而复始，我不是为了认命而活着，我是为了坚持，为了信仰，为了梦想而更好的活着。

　　即便曾经一度垂死挣扎，而今，乌云散去，风雨平息，一切又是新的开始，即便生活再艰难，人生再无奈。为了自己，为了父亲，为了很多很多关心我的人。为了信仰，为了希望，为了梦想。我想好好的活着。
    </div>
</div>
</body>
</html>
鼠标配合滚动文本

 

本节重点

     拖拽---封装

     拖拽----限制范围

     拖拽----磁性吸附

     拖拽---图片

     拖拽---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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            if(l<50)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth-50)
            {
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            
            if(t<50)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight-50)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            
            oDiv.style.left=l+\'px\';
            oDiv.style.top=t+\'px\';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>
拖拽磁性吸附
<!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>
<style>
.box {position:absolute; border:1px dashed black;}
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        var oNewDiv=document.createElement(\'div\');
        
        oNewDiv.className=\'box\';
        oNewDiv.style.width=oDiv.offsetWidth+\'px\';
        oNewDiv.style.height=oDiv.offsetHeight+\'px\';
        
        document.body.appendChild(oNewDiv);
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oNewDiv.style.left=oEvent.clientX-disX+\'px\';
            oNewDiv.style.top=oEvent.clientY-disY+\'px\';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oNewDiv.style.left;
            oDiv.style.top=oNewDiv.style.top;
            
            document.body.removeChild(oNewDiv);
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>
带框拖拽
<!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>
<style>
.box {position:absolute; border:1px dashed black;}
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        var oNewDiv=document.createElement(\'div\');
        
        oNewDiv.className=\'box\';
        oNewDiv.style.width=oDiv.offsetWidth-2+\'px\';
        oNewDiv.style.height=oDiv.offsetHeight-2+\'px\';
        oNewDiv.style.left=oDiv.offsetLeft+\'px\';
        oNewDiv.style.top=oDiv.offsetTop+\'px\';
        
        document.body.appendChild(oNewDiv);
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oNewDiv.style.left=oEvent.clientX-disX+\'px\';
            oNewDiv.style.top=oEvent.clientY-disY+\'px\';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oNewDiv.style.left;
            oDiv.style.top=oNewDiv.style.top;
            
            document.body.removeChild(oNewDiv);
        };
    };
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>
带框拖拽2
<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
#div3 {width:100px; height:100px; background:green; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    drag(\'div1\');
    drag(\'div2\');
    drag(\'div3\');
};

function drag(id)
{
    var oDiv=document.getElementById(id);
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+\'px\';
            oDiv.style.top=oEvent.clientY-disY+\'px\';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
}
</script>
</head>

<body>
<div id="div1">
</div>

<div id="div2">
</div>

<div id="div3">
</div>
</body>
</html>
拖拽封装
<!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>
<style>
#div1 {width:11px; height:11px; background:url(drag_ico.gif); position:absolute; bottom:0; right:0; cursor:nw-resize;}
#div2 {width:200px; height:150px; background:#CCC; position:relative;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    var oDiv2=document.getElementById(\'div2\');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv2.style.width=oEvent.clientX-disX+oDiv.offsetWidth+\'px\';
            oDiv2.style.height=oEvent.clientY-disY+oDiv.offsetHeight+\'px\';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};
</script>
</head>

<body>
<div id="div2">
    <div id="div1">
    </div>
</div>
</body>
</html>
拖拽改变大小
<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;
        
        if(oDiv.setCapture)
        {
            oDiv.onmousemove=fnMove;
            oDiv.onmouseup=fnUp;
            
            oDiv.setCapture();
        }
        else
        {
            document.onmousemove=fnMove;
            document.onmouseup=fnUp;
        }
        
        function fnMove(ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+\'px\';
            oDiv.style.top=oEvent.clientY-disY+\'px\';
        }
        
        function fnUp()
        {
            this.onmousemove=null;
            this.onmouseup=null;
            
            if(this.releaseCapture)
            {
                this.releaseCapture();
            }
        }
        
        return false;
    };
};
</script>
</head>

<body>
asdfas
<div id="div1">
asdfs
</div>
zcvx
</body>
</html>
拖拽问题解决

     

     

 

以上是关于事件绑定高级应用的主要内容，如果未能解决你的问题，请参考以下文章

事件高级1注册事件（绑定事件）

事件高级1注册事件（绑定事件）

原生js如何绑定a连接点击事件？

关于高级事件的使用

JavaScript事件高级绑定

JavaScript高级程序设计之事件