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

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

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

一、语法

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>

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

鼠标捕获(setCapture，releaseCapture)的学习的更多相关文章

SetCapture ReleaseCapture
函数功能:该函数在属于当前线程的指定窗体里设置鼠标捕获.一旦窗体捕获了鼠标,全部鼠标输入都针对该窗体,不管光标是否在窗体的边界内.同一时刻仅仅能有一个窗体捕获鼠标.假设鼠标光标在还有一个线程创建的窗体 ...
wpf鼠标捕获与控件交互——UIElement.CaptureMouse
应用场景是这样的,我需要拖动一个元素在屏幕上移动,注册了被移动元素的MouseMove事件,但是当鼠标移到被移动元素的外面时,移动失效,且鼠标的手势变成了普通的箭头形状,于是就找到了以下的解决方案. ...
SetCapture() & ReleaseCapture() 捕获窗口外的【松开左键事件】: WM_LBUTTONUP
今天在窗口上绘图的时候,遇到一个问题:在特殊情况下,当用户在窗口中按下鼠标左键,然后移动到窗口外松开鼠标左键,这时程序中只能捕获到 WM_LBUTTONDOWN(按下) 和 WM_MOUSEMOVE( ...
事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
win32中SetCapture 和 ReleaseCapture的使用（查一下在VCL中的使用）
最近在用win32写<visual C++经典游戏程序设计>中的扫雷游戏,在写到鼠标点击雷区的时候用到了SetCapture,和ReleaseCapture这对系统函数. 那么为什么需要用 ...
《JavaScript 实战》：实现拖放（Drag & Drop）效果
拖放效果,也叫拖拽.拖动,学名Drag-and-drop ,是最常见的js特效之一.如果忽略很多细节,实现起来很简单,但往往细节才是难点所在.这个程序的原型是在做图片切割效果的时候做出来的,那时参考了 ...
windows API普通函数跟回调函数有何区别
通俗点讲:1.普通函数(假设我们都是函数)你卖电脑,我买电脑,我给你钱(调用你)后,你给我电脑(得到返回值).这种情况下,我给钱后就不能走开,必须等你把电脑给我,否则你交货的时候可能找不到人.2.回调 ...
js自定义的简易滚动条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS模拟滚动条(有demo和源码下载,支持拖动滚轮点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

随机推荐

实例讲解Nginx下的rewrite规则（转）
一．正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二．文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* ...
php-fpm 启动参数及重要配置详解(转)
约定几个目录 /usr/local/php/sbin/php-fpm /usr/local/php/etc/php-fpm.conf /usr/local/php/etc/php.ini 一,php- ...
redis 基本类型
1 hashes 类型及操作 redis hash 是一个string 类型的 field 和 value 的映射表.他的添加.删除操作时间复杂度都是 O(1) 2 hset,设置 hash fiel ...
Java：Swing篇，实现JList、JTextArea的自动滚动，实时刷新功能
1. 功能作为swing的组件,JList与JTextArea是不可以单独实现滚动功能的,需要与JScrollPane结合才可以. 本代码中: JList实现从其它数据源获取数据,然后依次对这些数据 ...
libgdx 1.4.1公布
(转载自http://www.libgdx.cn/topic/4/libgdx-1-4-1%E5%8F%91%E5%B8%83) libgdx从未停止进步的脚步.10月10日.libgdx1.4.1公 ...
sqlite数据库部署到服务器上的问题
试了一天...本地测试是好的(WIN10 64位+VS2015),部署到服务器上(WIN2008 32位+IIS6) 总是不行..按网上说了什么不要BUNDLE的,加入X86X64目录再放那个SQLi ...
【Android】19.2 ShareActionProvider类—帮你把信息分享出去
分类:C#.Android.VS2015: 创建日期:2016-03-06 一.简介共享操作提供程序类(ShareActionProvider)简化了你希望与其他人(或者其他应用程序)共享或分享出来 ...
cpu降频问题
cpu做为能耗很高的硬件,最近几年厂商在节能方面做了很多处理,在服务器运行时,基于负载情况可调节成节能模式,节省电能,副作用是cpu的频率会降低,导致应用程序性能降低. 有第三方统计,服务器规模达到万 ...
向Oracle数据库插入一条数据
这几天搞了一下Oracle数据库.可能用sql server习惯了,感觉好不方便.PL的界面友好度比sql server差远了 .既然都收购了PL了为什么不给它做好一点呢?各种不便.郁闷向Orac ...
win7下安装curl
先去官网下载curl,地址https://winampplugins.co.uk/curl/,我下载的版本是curl_7_52_1_openssl_nghttp2_x64.然后执行curl.exe并且 ...

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

鼠标捕获(setCapture，releaseCapture)的学习的更多相关文章

随机推荐

热门专题