脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js拖拽――将鼠标事件响应范围扩大到整个系统桌面，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 起因：
最近在做一个可拖拽的拓扑图，遇到的这个问题：如果执行拖拽操作的时候鼠标拖动很快，可能会出现鼠标脱离页面乃至浏览器的范围，如果这时松开鼠标按键，那么将不能响应鼠标的onmouseup事件，从而导致onmouseup和onmouSEMove事件不能被释放掉。
对于这个问题，网上很多相似的文章写了解决办法，但都有些毛病，我在这里总结归纳一下。
解决办法：
ie浏览器和Firefox提供了setCapture 和 releaseCapture函数来解决该问题。简单写个小例子：
复制代码
2
3 VAR i = 0;
4 p1.onmousedown = function() {
5 p1.setCapture(); //用dom元素调用该函数相当于将该dom元素上的事件交给操作系统去维护，从而让该dom元素上的事件响应不依赖于浏览器
6 p1.onmousemove = function() {
8 }
9 p1.onmouseup = function() {
10 p1.onmouseup = null;
11 p1.onmousemove = null;
12 p1.releaseCapture(); //拖拽结束后要释放掉
13 }
14 }
复制代码
方案二：针对chrome浏览器
悲催的是chrome浏览器并没有提供上述函数的实现，那只能另辟蹊径了。方法就是在window对象上注册onmousedown、onmousemove、onmouseup事件。这样只要在窗口内触发onmousedown事件之后，无论您鼠标移动到什么地方，都能onmousemove和onmouseup事件。至于您要对哪个具体的dom元素进行操作，您可以在onmousedown事件的回调函数中通过event.target获取目标元素对象，然后再用call去执行相应函数即可。例子如下：
复制代码
1 <!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html XMlns="https://www.w3.org/1999/xhtml">
3 <head>
4 <;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 </head>
7
8 <body>
9 <p id="p1" style="width:100px; height:100px; border:1px solid red">
10
11 </p>
12
13 </body>
14 </html>
15 <script>
16 var i = 0;
17 window.onmousedown= function(event) {
18 var targetObj = event.target;
19 if (targetObj.id == "p1") { //只有在id为p1的元素上按下鼠标左键才能触发鼠标移动事件
20 window.onmousemove = function() {
21 p1Move.call(targetObj);
22 }
23 window.onmouseup= function() {
24 window.onmouseup = null;
25 window.onmousemove = null;
26 }
27 }
28 }
29
30 //鼠标移动时执行的事件
31 function p1Move() {
32 console.log(i++);
33 }
34 </script>
复制代码
注意：1、该解决方案不适用于ie8及以下浏览器。因为这些浏览器不支持在window对象上注册事件。 2、该解决方案也不适用于iframe，您可以把上面的例子放到iframe中去试一试。原因大概是因为系统只维护最顶层window上的事件。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-js拖拽――将鼠标事件响应范围扩大到整个系统桌面全部内容，希望文章能够帮你解决javascript代码实例教程-js拖拽――将鼠标事件响应范围扩大到整个系统桌面所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。