事件捕获（IE下正常拖拽）

最新推荐文章于 2022-05-09 23:51:52 发布

weixin_30399055

最新推荐文章于 2022-05-09 23:51:52 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pjw2017/p/6307169.html

版权

在IE浏览器下如果没有加上事件捕获语句就会发生在拖拽时选中文字的情况。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0; padding: 0; background: black;}
#div1{width:100px; height: 100px; background: gray; position: absolute;}
</style>

</head>
<body>
asdjasd<br>
asdasdjjo<br>
<div id = "div1">sadjasd</div>
<script type="text/javascript">
    var oDiv = document.getElementById('div1');

    var disX = 0;
    var disY = 0;
    
    oDiv.onmousedown = function(ev){
        var oEvent = ev||event;

        disX = oEvent.clientX - oDiv.offsetLeft;
        disY = oEvent.clientY - oDiv.offsetTop;

        //oDiv.onmousemove = function(ev){
        oDiv.onmousemove = function(ev){
            var oEvent = ev||event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;

            if(l<30)
            {
                l = 0;//为了不让div移出浏览器
            }
            else if(l>(document.documentElement.clientWidth-oDiv.offsetWidth))
            {
                //让div不能从浏览器右边出去  浏览器可视区的宽度-div的宽
                l = document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            else if(t>(document.documentElement.clientHeight-oDiv.offsetHeight))
            {
                t = document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            else if (t<30)
            {
                t = 0;
            }

            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';

        }
            //oDiv.onmouseup = function(ev){
            oDiv.onmouseup = function(ev){
                //oDiv.onmousemove = null;//去掉鼠标移动事件
                oDiv.onmousemove = null;
                oDiv.releaseCapture();//释放捕获
          }
              //IE下
            oDiv.setCapture();//事件捕获，把document上的所有事件都集中在obj上
            return false;//阻止火狐浏览器拖拽空div的默认bug事件和谷歌、IE9的默认事件
    }
    
</script>
</body>
</html>