Javascript 如何处理不带'；t触发mousemove事件

我试图使用鼠标事件和绝对定位为元素创建一个简单的拖动行为

我有一个容器div的

mousemove

事件侦听器，它在鼠标事件的

clientX

和

clientY

属性的帮助下更改

boxRef

的位置

当鼠标移动缓慢时，它工作正常，但当鼠标移动快速时，它只是停止， 我如何处理这个问题，以便无论鼠标移动的速度如何，元素都不会停止

const shadowStytle=“10px 10px 12px#88888”； const appRef=document.getElementById（'app'）； appRef.innerHTML=`； const-boxRef=document.getElementById（“框”）； const xOffset=boxRef.clientWidth/2； 常数yOffset=boxRef.clientHeight/2； 让selectionLocked=false； 函数锁选择（）{ selectionLocked=true； boxRef.style.boxShadow=shadowStytle； boxRef.style.backgroundColor=“红色”； } 函数unlockSelection（）{ selectionLocked=false； boxRef.style.boxShadow=“无”； boxRef.style.backgroundColor=“黑色”； } 解除锁定选择（）； boxRef.addEventListener（“鼠标向下”（arg）=>{ 锁定选择（）； }); boxRef.addEventListener（“鼠标悬停”（arg）=>{ 解除锁定选择（）； }); boxRef.addEventListener（“mouseleave”（参数）=>{ 如果（选择锁定）{ selectionLocked=false； boxRef.style.boxShadow=“无”； } }); appRef.addEventListener（“mousemove”，（arg）=>{ 如果（选择锁定）{ boxRef.style.left=`${arg.clientX-xOffset}px`； boxRef.style.top=`${arg.clientY-yOffset}px`； } });

.box{
位置：绝对位置；
边框：1px纯黑；
填充：25px；
宽度：10%；
}

---

您不需要在元件上安装

鼠标。您的问题是，
mouseleave
在元素上激发并终止您的拖动。相反，利用事件冒泡，将处理程序添加到一个足够大的父容器或窗口中。在窗口/容器上启动
mouseup
当且仅当
mousedown
预先激活它时。如果需要，还可以删除并重新附加元素上
mousedown
的window上的处理程序，以保存一些计算。但我留下了：


const shadowStytle=“10px 10px 12px#88888”；
const appRef=document.getElementById（'app'）；
appRef.innerHTML=`；
const-boxRef=document.getElementById（“框”）；
const xOffset=boxRef.clientWidth/2；
常数yOffset=boxRef.clientHeight/2；
让selectionLocked=false；
函数锁选择（）{
selectionLocked=true；
boxRef.style.boxShadow=shadowStytle；
boxRef.style.backgroundColor=“红色”；
}
函数unlockSelection（）{
selectionLocked=false；
boxRef.style.boxShadow=“无”；
boxRef.style.backgroundColor=“黑色”；
}
解除锁定选择（）；
boxRef.addEventListener（“鼠标向下”（arg）=>{
锁定选择（）；
});
window.addEventListener（“mouseup”，（arg）=>{
selectionLocked&&unlockSelection（）；
});
boxRef.addEventListener（“mouseleave”（参数）=>{
/*如果（选择锁定）{
selectionLocked=false；
boxRef.style.boxShadow=“无”；
}*/
});
window.addEventListener（“mousemove”，（arg）=>{
如果（选择锁定）{
boxRef.style.left=`${arg.clientX-xOffset}px`；
boxRef.style.top=`${arg.clientY-yOffset}px`；
}
}); 

您可以在

窗口

上设置

mousemove

事件监听器函数，而不是

appRef

。尝试过了，还是一样的行为mg！好吧，我想我需要睡觉了，我的巴迪为了其他的目的加了一个去老鼠的方法，然后把它移除，愚蠢的美沙酮帮了我

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

window.addEventListener("mouseup", (arg) => {
  selectionLocked && unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  /*if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }*/
});

window.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});