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

鼠标捕获(setCapture,releaseCapture)的学习鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象——对指定的对象设置鼠标捕获。这个对象会为当前应用程序或整个系统接收所有鼠标事件。所谓鼠标捕获,是指对鼠标事件(onmousedown,onmouseup,onmousemove,onclick,ondblclick,onmouseover,onmouseout)进行捕捉,使在容器内的子对象的鼠标事件均…

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

鼠标捕获(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>

三、案例——完美拖拽

完整代码

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

<!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;
    }

参考:

  • https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture
  • http://msdn.microsoft.com/en-us/library/ie/ms536742%28v=vs.85%29.aspx
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135014.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • async/await 的理解和用法

    async/await 的理解和用法async/await是什么async/await是ES7提出的基于Promise的解决异步的最终方案。asyncasync是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。//async基础语法asyncfunctionfun0(){console.log(1);return1;}fun0().then(val=>{conso

  • 11.1JS笔记_数据结构手写笔记

    11.1JS笔记_数据结构手写笔记11.1JS笔记

  • 手机看片神器地址_给我一个可以手机看片的

    手机看片神器地址_给我一个可以手机看片的你是不是想找可以免费在线看电影电视剧的网站,但总是找不到可以正常使用的影视网站。其实要想找可以手机免费看片的电影网站,直接找一些优质的导航网站即可,这些导航网站收录了大量的精品影视资源网站。如果你是自己网上查找,会经常搜到一些假的点网站,个别好用的还经常会失效。而导航网站一般都会筛选测试好用的手机在线看片电影网站,并且会不断的更新完善。推荐两个可以免费手机看片神器电影网址导航网站1.办公人导航办公人导航网是一个实用的办公生活导航网站,收录了大量的办公相关的精品站点。在办公人导航网的影视网站栏目,.

  • python读取txt文件(多种方法)「建议收藏」

    python读取txt文件(多种方法)「建议收藏」原始数据:唐诗一百首.txt方法1:f=open(‘唐诗一百首.txt’,encoding=’gbk’)txt=[]forlineinf:txt.append(line.strip())print(txt)line.strip()去除首尾空格encoding编码格式utf-8,gbk方法2f=open(‘唐诗一百首.txt’)line=f.readline().strip()#读取第一行txt=[]txt.append(line)whileli

  • 服务器cpu型号后面的字母,Intel 至强 E3服务器CPU后缀解读[通俗易懂]

    服务器cpu型号后面的字母,Intel 至强 E3服务器CPU后缀解读[通俗易懂]三、Intel至强E3服务器CPU后缀解读DIY玩家认识服务器CPU最多的无疑是E3神教,今天我们就总结下XeonE3神教的CPU后缀有什么特色。●V1-V5E3神教!从SNB开始,Intel就推出了E3系列至强CPU。由于阵脚一样,只需升级BIOS就能享用信仰级至强CPU,让2011年开始E3神教开始壮大。Intel也推出了E3的后续型号,与历代酷睿对应,从IvyBridge的V2到Sk…

  • 眼下最好的JSP分页技术

    眼下最好的JSP分页技术

    2021年11月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号