大家好，又见面了，我是你们的朋友全栈君。
接着鼠标拖拽div（1）解决问题，当在拖拽事件所在的页面按下键盘的ctrl+A全选后，再去拖拽div，浏览器会默认去搜索网页中的内容，拖拽功能就会失效，（搜索网页内容是浏览器的默认行为，所以要想不发生这种情况，就得将其取消，是谁执行之后触发了浏览器的默认行为，就在谁里面return false即可取消浏览器的默认行为，但这种方式ie8及以下的版本不支持。）
- 在ie8及以下版本浏览器中，如果调用了元素的setCapture()方法，那么点击任何事物都会来执行这个元素绑定的响应函数。例如：
btn.onclick = function(){
alert(1);
};
btn1.onclick = function(){
alert(2);
};
btn.setCapture();
在以上的例子中，调用了btn的setCapture()方法，那么点击任何事物都会来执行btn的响应函数，点击刷新、点击网页的其他区域、甚至点击网页以外的电脑桌面，都会弹出”1“，但是这个方法是一次性的。
- setCapture()方法：捕捉事件，只要触发相应事件就捕捉，“很强横”。
可以将setCapture()方法用到鼠标拖拽div的例子中，但是注意，在给mousedown事件中，调用的box的**setCapture()方法之后，会有一个问题，就是当鼠标松开之后，事件还会一直被捕获，网页中的其他选项都无法点击，而且就算鼠标松开，div也还会跟着鼠标对应的位置移动，为了解决这个问题，就需要在鼠标松开的时候取消捕获，可以使用releaseCapture()**方法来取消先前调用的捕获方法，在mouseup事件中调用box的releaseCapture()方法即可。（如果不涉及ie8浏览器，就不用管这个问题。在火狐中嗲用时不会报错，但是在chrome中没有setCapture()这个方法）。
- releaseCapture()方法：取消setCapture()方法。
优化拖拽代码
在之前拖拽div的代码中，如果要拖拽多个内容，就需要重新为一个内容绑定事件，所有的操作都要重新写一遍，所以对之前的代码进行了优化：
- 定义函数，将拖拽的方法封装起来，方便调用，要拖拽哪个元素，调用封装好的函数并传递相应元素的参数即可。
优化后的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box1{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
drag(box);
drag(box1);
};
function drag(obj){
obj.onmousedown = function(event){
var dx = event.clientX - obj.offsetLeft;
var dy = event.clientY - obj.offsetTop;
//考虑兼容问题
// if(box.setCapture){
// box.setCapture();
// }
obj.setCapture && obj.setCapture();//和上面的判断效果相同，但是使用方便
document.onmousemove = function(event){
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
obj.style.left = left - dx +"px";
obj.style.top = top - dy +"px";
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
// alert("鼠标松开了");
obj.releaseCapture && obj.releaseCapture();//取消setCapture()方法
};
};
};
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/140862.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
