如何在mousedown元素之外捕获mouseup事件？(即为了适当的拖放？)
如何在mousedown元素之外捕获mouseup事件？(即为了适当的拖放？)
提问于 2014-01-12 11:02:50
如果在触发鼠标按钮的元素之外释放鼠标按钮，则不会触发事件。
这会导致JQuery UI中的拖放错误:当鼠标按钮被释放到容器外时，JQuery 拖曳元素不会停止拖动(因为该元素在到达其父边界时将停止移动)。复制步骤：
- 去http://jqueryui.com/draggable/。
- 将可拖动的容器向下拖动，直到鼠标离开周围的容器为止。
- 释放鼠标按钮(此时不按鼠标按钮)
- 将鼠标移回容器中
- 可拖的还在被拖着。我希望当我释放鼠标按钮时，拖拽就会停止--不管它在哪里释放。
我在最新的Chrome和IE中看到了这种行为。
有什么解决办法吗？
我知道我们可以停止在mouseout或mouseleave上拖动容器，但是我想继续拖动，即使我在父容器之外，就像在谷歌地图中一样(不管您在哪里释放鼠标，它总是停止拖动映射)。
Stack Overflow用户
回答已采纳
发布于 2022-03-28 07:48:21
您可以让鼠标向下的元素“捕获”指针。然后它将始终接收mouseup事件。在“反应”中，这可能是这样的：
const onPointerDownDiv1 = (event: React.PointerEvent) => {
(event.target as HTMLDivElement).setPointerCapture(event.pointerId);
// Do something ...
};
const onPointerUpDiv1 = (event: React.PointerEvent) => {
(event.target as HTMLDivElement).releasePointerCapture(event.pointerId);
// Do something ...
};<div
ref={div1}
id="div1"
className="absolute top-[200px] left-[390px] h-8 w-8 bg-red-300"
onPointerDown={onPointerDownDiv1}
onPointerUp={onPointerUpDiv1}
/>下面是一个使用“纯香草”html +javascript的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div
id="div1"
style="
position: absolute;
left: 50px;
top: 50px;
width: 20px;
height: 20px;
background-color: red;
"
></div>
</body>
<script>
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
let divElement = document.getElementById("div1");
divElement.addEventListener("pointerdown", onPointerDown);
divElement.addEventListener("pointermove", onPointerMove);
divElement.addEventListener("pointerup", onPointerUp);
function onPointerDown(event) {
divElement.setPointerCapture(event.pointerId);
offsetX = event.clientX - divElement.offsetLeft;
offsetY = event.clientY - divElement.offsetTop;
isDragging = true;
}
function onPointerMove(event) {
if (isDragging) {
divElement.style.left = (event.clientX - offsetX).toString() + "px";
divElement.style.top = (event.clientY - offsetY).toString() + "px";
}
}
function onPointerUp(event) {
divElement.releasePointerCapture(event.pointerId);
isDragging = false;
}
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21073863
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号