事件深入应用一

来源：互联网发布：ansible windows 编辑：程序博客网时间：2024/06/14 17:49

拖拽的原理

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拖拽的原理</title>    <style type="text/css">        #div1{width: 100px;height: 100px;background: #f00;position:absolute;}        #div2{width: 100px;height: 100px;background: #ff0;position: absolute;left: 400px;top: 200px;}    </style></head><script>window.onload=function (){    var oDiv=document.getElementById('div1');    oDiv.onmousedown=function (ev){            var ev=ev||event;            //clientX/clientY  事件发生时，鼠标到可视区的距离            var disX=ev.clientX-oDiv.offsetLeft;            var disY=ev.clientY-oDiv.offsetTop;        document.onmousemove=function (ev){            var ev=ev||event;            oDiv.style.left=ev.clientX - disX + 'px';            oDiv.style.top=ev.clientY - disY + 'px';        }        //鼠标抬起事件放在div上，当有一个元素遮挡住div时，鼠标抬起事件就发生在了另一个div上，所以最好是把鼠标抬起事件放在document上        /*oDiv.onmouseup=function (){            document.onmousemove=null;        }*/        document.onmouseup=function (){            document.onmousemove=null;            document.onmouseup=null;        }    }};</script><body>    <div id="div1"></div>    <div id="div2"></div></body></html>

拖拽的问题及解决办法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拖拽的问题</title>    <style type="text/css">        #div1{width: 100px;height: 100px;background: #f00;position:absolute;}    </style></head><script>/*    拖拽的问题:    1.拖拽的时候，如果有文字被选中，会产生问题    原因:当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字效果    解决办法:阻止默认行为，但在非标准IE下还是会有问题，需另做处理*/window.onload=function (){    var oDiv=document.getElementById('div1');    oDiv.onmousedown=function (ev){            var ev=ev||event;            var disX=ev.clientX-oDiv.offsetLeft;            var disY=ev.clientY-oDiv.offsetTop;        document.onmousemove=function (ev){            var ev=ev||event;            oDiv.style.left=ev.clientX - disX + 'px';            oDiv.style.top=ev.clientY - disY + 'px';        }        document.onmouseup=function (){            document.onmousemove=null;        }        return false;    }};</script><body>    文字文字文字文字    <div id="div1"></div></body></html>

全局捕获

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>全局捕获</title></head><body>    <input type="button" name="" value="按钮一">    <input type="button" name="" value="按钮二">    <script type="text/javascript">    var aInput=document.getElementsByTagName('input');    aInput[0].setCapture();//设置全局捕获，当我们给一个元素设置全局捕获后，这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被设置了全局捕获的那个元素截取，全局捕获是IE的私有属性，在标准浏览器中不支持，但也不会报错    aInput[0].onclick=function (){        alert(1);    }    aInput[1].onclick=function (){        alert(2);    }    </script></body></html>

拖拽问题及解决办法2

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拖拽的问题</title>    <style type="text/css">        #div1{width: 100px;height: 100px;background: #f00;position:absolute;}    </style></head><script>/*    拖拽的问题:    1.拖拽的时候，如果有文字被选中，会产生问题    原因:当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字效果    解决办法:        标准：阻止默认行为        非标准IE：设置全局捕获，不让文字获取onmousemove事件                  元素.setCapture()   设置全局捕获                  元素.releaseCapture()   释放全局捕获 */window.onload=function (){    var oDiv=document.getElementById('div1');    oDiv.onmousedown=function (ev){            var ev=ev||event;            var disX=ev.clientX-oDiv.offsetLeft;            var disY=ev.clientY-oDiv.offsetTop;        if (oDiv.setCapture){            oDiv.setCapture();        }        document.onmousemove=function (ev){            var ev=ev||event;            oDiv.style.left=ev.clientX - disX + 'px';            oDiv.style.top=ev.clientY - disY + 'px';            if (oDiv.releaseCapture) {            oDiv.releaseCapture();            }        }        document.onmouseup=function (){            document.onmousemove=null;        }        return false;    }};</script><body>    文字文字文字文字    <div id="div1"></div></body></html>

阅读全文

0 0