java 鼠标拖拽事件_[Java教程]js拖拽——将鼠标事件响应范围扩大到整个系统桌面...-CSDN博客

本文链接：https://blog.csdn.net/weixin_32093519/article/details/114387053

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

2014-05-09 18:00:15

起因：

最近在做一个可拖拽的拓扑图，遇到的这个问题：如果执行拖拽操作的时候鼠标拖动很快，可能会出现鼠标脱离页面乃至浏览器的范围，如果这时松开鼠标按键，那么将不能响应鼠标的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 2 4 5

6 7 8 9

10 11

12 13 14