JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）

全栈程序员-站长 • 2022年5月8日下午7:40 • 未分类 • 阅读 54

大家好，又见面了，我是你们的朋友全栈君。

接着鼠标拖拽div（1）解决问题，当在拖拽事件所在的页面按下键盘的ctrl+A全选后，再去拖拽div，浏览器会默认去搜索网页中的内容，拖拽功能就会失效，（搜索网页内容是浏览器的默认行为，所以要想不发生这种情况，就得将其取消，是谁执行之后触发了浏览器的默认行为，就在谁里面return false即可取消浏览器的默认行为，但这种方式ie8及以下的版本不支持。）

在ie8及以下版本浏览器中，如果调用了元素的setCapture()方法，那么点击任何事物都会来执行这个元素绑定的响应函数。例如：

btn.onclick = function(){ 
   
    alert(1);
};
btn1.onclick = function(){ 
   
    alert(2);
};

btn.setCapture();

在以上的例子中，调用了btn的setCapture()方法，那么点击任何事物都会来执行btn的响应函数，点击刷新、点击网页的其他区域、甚至点击网页以外的电脑桌面，都会弹出”1“，但是这个方法是一次性的。

setCapture()方法：捕捉事件，只要触发相应事件就捕捉，“很强横”。

可以将setCapture()方法用到鼠标拖拽div的例子中，但是注意，在给mousedown事件中，调用的box的**setCapture()方法之后，会有一个问题，就是当鼠标松开之后，事件还会一直被捕获，网页中的其他选项都无法点击，而且就算鼠标松开，div也还会跟着鼠标对应的位置移动，为了解决这个问题，就需要在鼠标松开的时候取消捕获，可以使用releaseCapture()**方法来取消先前调用的捕获方法，在mouseup事件中调用box的releaseCapture()方法即可。（如果不涉及ie8浏览器，就不用管这个问题。在火狐中嗲用时不会报错，但是在chrome中没有setCapture()这个方法）。

releaseCapture()方法：取消setCapture()方法。

优化拖拽代码

在之前拖拽div的代码中，如果要拖拽多个内容，就需要重新为一个内容绑定事件，所有的操作都要重新写一遍，所以对之前的代码进行了优化：

定义函数，将拖拽的方法封装起来，方便调用，要拖拽哪个元素，调用封装好的函数并传递相应元素的参数即可。

优化后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){  
            var box = document.getElementById("box");

            drag(box);
            drag(box1);
            
        };

        function drag(obj){
            obj.onmousedown = function(event){
                var dx = event.clientX - obj.offsetLeft;
                var dy = event.clientY - obj.offsetTop;
                
                //考虑兼容问题
                // if(box.setCapture){
                //     box.setCapture();
                // }
                obj.setCapture && obj.setCapture();//和上面的判断效果相同，但是使用方便

                document.onmousemove = function(event){
                    event = event || window.event;
                    var left = event.clientX;
                    var top = event.clientY;
                    obj.style.left = left - dx  +"px";
                    obj.style.top = top - dy +"px";

                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                        // alert("鼠标松开了");
                        obj.releaseCapture && obj.releaseCapture();//取消setCapture()方法
                    };
                };
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
    <div id="box1"></div>
</body>
</html>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/140862.html原文链接：https://javaforall.net