如何处理不会触发mousemove事件的快速移动鼠标

Question

我正在尝试使用鼠标事件和绝对定位为元素创建简单的拖动行为。

我有一个容器div的mousemove事件监听器，它借助鼠标事件的boxRef和clientX属性更改clientY的位置。

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

＆＃13;

＆＃13;

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();
});

boxRef.addEventListener("mouseup", (arg) => {
  unlockSelection();
});

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

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

＆＃13;

.box {
  position: absolute;
  border: 1px solid black;
  padding: 25px;
  width: 10%;
}

＆＃13;

<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

Stackblitz

Answer 1

您不需要元素上的mouseleave。你的问题是mouseleave会触发元素并终止你的阻力。而是利用事件冒泡并将处理程序添加到足够大的父容器或window本身。当{且仅当 <{>>已激活> mouseup时，在窗口/容器上启动mousedown。如果你想要保存一些计算，你也可以删除并重新附加元素mousedown上的窗口上的处理程序。但我离开了它：

https://jsfiddle.net/ibowankenobi/gd1e93a3/1/

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`;
  }
});