鼠标捕获(setCapture，releaseCapture)的学习

全栈程序员站长

发布于 2022-09-06 10:25:06

63200

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

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

鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象——对指定的对象设置鼠标捕获。这个对象会为当前应用程序或整个系统接收所有鼠标事件。

所谓鼠标捕获，是指对鼠标事件（onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout）进行捕捉，使在容器内的子对象的鼠标事件均由容器对象触发，因此，只能在容器对象的鼠标事件函数中进行处理。
当参数为true时，对鼠标进行捕捉，相反，不捕捉。
与这个函数对应，releaseCapture方法释放鼠标捕获，并触发onlosecapture事件。

一、语法

1. MDN(Mozilla Developer Network)

element.setCapture(retargetToElement);

retargetToElement——If true, all events are targeted directly to this element; if false, events can also fire at descendants of this element.

document.releaseCapture()

释放鼠标捕捉——Once mouse capture is released, mouse events will no longer all be directed to the element on which capture is enabled.

2. msdn（Internet Explorer Dev Center）

object.setCapture(containerCapture)

其中： containerCapture [in, optional]—— Type: Boolean

true (true)——Default. 容器会捕获容器内所有对象的鼠标事件，即容器内的对象不会触发鼠标事件（跟容器外的对象一样）Events originating in a container are captured by the container.
false (false)——容器不会捕获容器内对象的鼠标事件，即容器内的对象可以正常地触发事件和取消冒泡。Events originating in a container are not captured by the container.

　　object.setCapture() 当一个object的被 setCapture 后，他的方法将会被继承到整个文档进行捕获。当不需要把方法继承到整个文档捕获时，要用 object.releaseCapture() 来释放.

二、案例——简单拖拽

完整代码

<!DOCTYPE html>
<html>
<head>
<title>drag example</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
#drag{
    
    position:absolute;left:12px;top:24px;width:100px;height:150px; display:block;border:1px solid #000000;z-index:1;background:#eeeeee; cursor: pointer;}
</style>
</head>
<body>
<div id="drag">drag me</div>
<script type="text/javascript">
window.onload=function(){
    objDiv = document.getElementById("drag");
    drag(objDiv);
};
function drag(dv){
    dv.onmousedown=function(e){
        var d=document;
        e = e || window.event;

        var x= e.layerX || e.offsetX;
        var y= e.layerY || e.offsetY;

        //设置捕获范围
        if(dv.setCapture){
            dv.setCapture();
        }else if(window.captureEvents){
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        }

        d.onmousemove=function(e){
            e= e || window.event;
            if(!e.pageX)e.pageX=e.clientX;
            if(!e.pageY)e.pageY=e.clientY;
            document.getElementById("drag").innerHTML= e.pageX+ e.pageY;
            var tx=e.pageX-x;
            var ty=e.pageY-y;
            dv.style.left=tx+"px";
            dv.style.top=ty+"px";
        };
        d.onmouseup=function(){
            //取消捕获范围
            if(dv.releaseCapture){
                dv.releaseCapture();
            }else if(window.captureEvents){
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }
            //清除事件
            d.onmousemove=null;
            d.onmouseup=null;
        };
    };
}
</script>
</body>
</html>

三、案例——完美拖拽

完整代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美拖拽</title>
<style type="text/css">
html,body{
     
     overflow:hidden;}
body,div,h2,p{
     
     margin:0;padding:0;}
body{
     
     color:#fff;background:#000;font:12px/2 Arial;}
p{
     
     padding:0 10px;margin-top:10px;}
span{
     
     color:#ff0;padding-left:5px;}
#box{
     
     position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
#box h2{
     
     height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
#box h2 a{
     
     color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
</style>
<script type="text/javascript">
window.onload=function (){
    var oBox=document.getElementById("box");
    var oH2 = oBox.getElementsByTagName("h2")[0];
    var oA = oBox.getElementsByTagName("a")[0];
    var aSpan = oBox.getElementsByTagName("span");    
    var disX = disY = 0;
    var bDrag = false;
    var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}];
    
    //鼠标按下, 激活拖拽
    oH2.onmousedown = function (event){        
        var event = event || window.event;
        bDrag = true;
        disX = event.clientX - oBox.offsetLeft;
        disY = event.clientY - oBox.offsetTop;        
        aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop})
        
        this.setCapture && this.setCapture();        
        return false;
    };
    
    //拖拽开始
    document.onmousemove = function (event){
        if (!bDrag) return;
        var event = event || window.event;
        var iL = event.clientX - disX;
        var iT = event.clientY - disY;
        var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
        var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
        
        iL = iL < 0 ? 0 : iL;
        iL = iL > maxL ? maxL : iL; 
        
        iT = iT < 0 ? 0 : iT;
        iT = iT > maxT ? maxT : iT;
        
        oBox.style.marginTop = oBox.style.marginLeft = 0;
        oBox.style.left = iL + "px";
        oBox.style.top = iT + "px";    
        aPos.push({x:iL, y:iT})
        
        status();
        
        return false;
    };

    //鼠标释放, 结束拖拽
    document.onmouseup = window.onblur = oH2.onlosecapture = function (){
        bDrag = false;                
        oH2.releaseCapture && oH2.releaseCapture();
        status();
    };
    
    //回放拖动轨迹
    oA.onclick = function (){
        if (aPos.length == 1) return;
        var timer = setInterval(function ()    {
            var oPos = aPos.pop();
            oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
        }, 30);        
        this.focus = false;//去除链接虚线        
        return false;
    };
    
    //阻止冒泡
    oA.onmousedown = function (event){
        (event || window.event).cancelBubble = true
    };
    
    //监听状态函数
    function status (){
        aSpan[0].innerHTML = bDrag;
        aSpan[1].innerHTML = oBox.offsetTop;
        aSpan[2].innerHTML = oBox.offsetLeft;
    }
    
    //初始调用
    status();
};
</script>
</head>
<body>
<div id="box">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span></span></p>
    <p><strong>offsetTop:</strong><span></span></p>
    <p><strong>offsetLeft:</strong><span></span></p>
</div>
</body>
</html>

View Code

javascript代码

//鼠标按下, 激活拖拽
    oH2.onmousedown = function (event){        
        var event = event || window.event;
        bDrag = true;
        disX = event.clientX - oBox.offsetLeft;
        disY = event.clientY - oBox.offsetTop;        
        aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop})；        
        this.setCapture && this.setCapture();        
        return false;
    };
    
    //拖拽开始
    document.onmousemove = function (event){
        if (!bDrag) return;
        var event = event || window.event;
        var iL = event.clientX - disX;
        var iT = event.clientY - disY;
        var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
        var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
        
        iL = iL < 0 ? 0 : iL;    
        iL = iL > maxL ? maxL : iL; 
        
        iT = iT < 0 ? 0 : iT;
        iT = iT > maxT ? maxT : iT;
        
        oBox.style.marginTop = oBox.style.marginLeft = 0;
        oBox.style.left = iL + "px";
        oBox.style.top = iT + "px";    
        aPos.push({x:iL, y:iT})        
        status();        
        return false;
    };

    //鼠标释放, 结束拖拽
    document.onmouseup = window.onblur = oH2.onlosecapture = function (){
        bDrag = false;                
        oH2.releaseCapture && oH2.releaseCapture();
        status();
    };
    //阻止冒泡
    oA.onmousedown = function (event){
        (event || window.event).cancelBubble = true
    };
    
    //监听状态函数
    function status (){
        aSpan[0].innerHTML = bDrag;
        aSpan[1].innerHTML = oBox.offsetTop;
        aSpan[2].innerHTML = oBox.offsetLeft;
    }

参考：