极客观点
项目管理
HarmonyOS
1.以下是一个简单的鼠标拖拽，碰撞检测，表面上可以正常运行，拖拽灰色div1 方块碰到 绿色方块div2 变色，但是我鼠标在点击div2 绿色方块不放并且移动到空白区域（document）松开，再去拖拽div1就无法拖动了，松开鼠标div1 一直跟随鼠标，在网上查了是系统默认事件，在div1点击事件加上return false 阻止默认事件就可以，但是这个是什么事件呢，一直搞不明白，来求教。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>碰撞检测p1</title>
<style>
*{margin:0;padding:0;}
div{width:200px;height:200px;}
#div1{position: absolute;left:0;top:0;background-color: darkgrey;}
#div2{position: absolute;left:50%;top:50%;margin:-100px;background-color: darkseagreen;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.onmousedown=function(ev){
var oEvent = ev || event;
oX = oEvent.clientX-oDiv1.offsetLeft;
oY = oEvent.clientY-oDiv1.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
oDiv1.style.left = oEvent.clientX-oX+"px";
oDiv1.style.top = oEvent.clientY-oY+"px";
xLimit = oDiv1.offsetLeft + oDiv1.offsetWidth >= oDiv2.offsetLeft && oDiv1.offsetLeft <= oDiv2.offsetLeft + oDiv2.offsetWidth;
yLimit = oDiv1.offsetTop + oDiv1.offsetWidth >= oDiv2.offsetTop && oDiv1.offsetTop <= oDiv2.offsetTop + oDiv2.offsetHeight;
if(xLimit && yLimit){
oDiv2.style.backgroundColor = 'red';
}else{
oDiv2.style.backgroundColor = 'darkseagreen';
}
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup =null;
}
//return false;
}
</script>
</body>
</html>
打
console可以发现，其中有次没有触发mouseup。导致松开还可以拉着走。然后就是拖不动的问题了。根据发现，应该是浏览器判断走系统拖动。mousedown的时候
ev.preventDefault();,禁止就好了。https://www.lilnong.top/stati...