Javascript 鼠标拖动的实现问题

我想实现一个包含某些元素的可拖动映射

-->参见JSFIDLE：

通过使用

mousedown

，

mousemove

和

mouseup

我实现了拖动。 然而，我面临的问题是：

当按下鼠标按钮，然后移动到窗口外时，我没有得到

mouseup

事件。重新进入窗口（很久以前就释放了鼠标按钮）我的地图仍然认为按钮已按下，并相应地出现错误

当地图上有对象时，我在移动这些对象时不会得到

mousemove

事件。因此，当我进入和离开这样一个对象时，地图会挂起并跳跃

在这些对象上，我仍然希望有一个

移动

鼠标光标。我可以更改每个对象上的

光标

样式（在小提琴中，我为对象1做了这个示例），但这似乎不是一个好方法。有更优雅的解决方案吗

---

离开

画布

时需要捕捉，例如

mouseout

，但当光标移动到其他元素上时也会触发该事件

一个简单的解决方法是简单地将一个类添加到

canvas

，在这些画布上设置

指针事件：none

使用该类，您还可以控制光标，并避免使用脚本设置光标

堆栈片段

updateInfo=function（）{
document.getElementById（'info'）.innerHTML=
'Position='+JSON.stringify（Position）+
'
dragInfo='+JSON.stringify（dragInfo）；
};
const canvas=document.getElementsByTagName（'canvas'）[0]；
设位置={x:0，y:0}；
设dragInfo=null；
updateInfo（）；
addEventListener（'mousedown'，函数（e）{
dragInfo={
起始事件：{
x:e.clientX，
y:e.clientY，
},
起始位置：位置
};
canvas.classList.add（'drawing'）；
updateInfo（）；
});
addEventListener（'mousemove'，函数（e）{
if（dragInfo==null）返回；
职位={
x:dragInfo.startPosition.x-（e.clientX-dragInfo.startEvent.x），
y:dragInfo.startPosition.y-（e.clientY-dragInfo.startEvent.y）
};
updateInfo（）；
});
addEventListener（'mouseup'，函数（e）{
dragInfo=null；
canvas.classList.remove（'drawing'）；
updateInfo（）；
});
canvas.addEventListener（'mouseout'，函数（e）{
dragInfo=null；
canvas.classList.remove（'drawing'）；
updateInfo（）；
});
*{
用户选择：无；
字体系列：monospace；
}
帆布{
背景：黑色；
边框：1px纯红；
}
.拖{
光标：移动；
}
B.obj{
位置：绝对位置；
宽度：50px；
高度：50px；
背景：绿色；
颜色：白色；
文本对齐：居中；
线高：50px；
字体大小：粗体；
}
.拖动~.obj{
指针事件：无；
}

1.
2.
3.
4.
我的答案中缺少了什么，或者你就是没有时间检查？@LGSon没有时间回答：-）很有魅力。特别有用的是
mouseout
和
mouseleave
之间的区别-我不知道。谢谢。。。结果很好：）