首页 > 代码库 > js拖拽——将鼠标事件响应范围扩大到整个系统桌面

js拖拽——将鼠标事件响应范围扩大到整个系统桌面

2024-07-03 21:05:35   226人阅读

起因：

最近在做一个可拖拽的拓扑图，遇到的这个问题：如果执行拖拽操作的时候鼠标拖动很快，可能会出现鼠标脱离页面乃至浏览器的范围，如果这时松开鼠标按键，那么将不能响应鼠标的onmouseup事件，从而导致onmouseup和onmousemove事件不能被释放掉。

对于这个问题，网上很多相似的文章写了解决办法，但都有些毛病，我在这里总结归纳一下。

解决办法：

方案一：针对ie和火狐浏览器

ie浏览器和Firefox提供了setCapture 和 releaseCapture函数来解决该问题。简单写个小例子：

 1 /*...html部分略...*/
 2 
 3 var i = 0;
 4 div1.onmousedown = function() {
 5       div1.setCapture(); //用dom元素调用该函数相当于将该dom元素上的事件交给操作系统去维护，从而让该dom元素上的事件响应不依赖于浏览器
 6       div1.onmousemove = function() {
 7          console.log(i++);
 8       }
 9       div1.onmouseup = function() {
10           div1.onmouseup = null;
11         div1.onmousemove = null;
12         div1.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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://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 <div id="div1" style="width:100px; height:100px; border:1px solid red">
10     
11 </div>
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 == "div1") { //只有在id为div1的元素上按下鼠标左键才能触发鼠标移动事件
20             window.onmousemove = function() {
21                 div1Move.call(targetObj);
22             }
23             window.onmouseup= function() {
24                 window.onmouseup = null;
25                 window.onmousemove = null;
26             }
27         }
28     }
29     
30     //鼠标移动时执行的事件
31     function div1Move() {
32         console.log(i++);
33     }
34 </script>

注意：1、该解决方案不适用于ie8及以下浏览器。因为这些浏览器不支持在window对象上注册事件。 2、该解决方案也不适用于iframe，您可以把上面的例子放到iframe中去试一试。原因大概是因为系统只维护最顶层window上的事件。

 

总结：结合方案一和方案二可以解决浏览器的兼容性问题，但是由于方案二对于iframe无效，所以在实现有拖拽需求的页面时，只能不用iframe了。

百度地图和谷歌地图都实现了浏览器外响应拖拽事件的效果，不知道他们是否是通过上述方法实现的。还请大神留言相告，谢谢。


联系
我们