图形编辑器中JS实现防误操作之拖拽阻塞

let isPressing = false;
let currentTool = null; // 当前工具对象
// 鼠标按下
function handleDown(e) {
  isPressing = true;
  currentTool.start(e);
}
// 鼠标移动
function handleMove(e) {
  if (isPressing) {
    currentTool.drag(e);
  } else {
    // 非拖拽的移动事件
    // 比如选择工具停留在图形上，图形要高亮，此时没发生拖拽
    currentTool.move(e);
  }
}
// 鼠标释放
function handleUp(e) {
  currentTool.end(e);
  isPressing = false;
}

let isPressing = false;
let currentTool = null; // 当前工具对象
let isEnableDragging = false; // 是否调用工具对象的 drag 方法
let startPos = null; // 保存鼠标按下时的坐标
const blockStep = 4; // 阈值
function handleDown(e) {
  isPressing = true;
  isEnableDragging = false;
  startPos = { x: e.clientX, y: e.clientY };
  currentTool.start(e);
}
function handleMove(e) {
  // 判断位移是否突破阈值，是的话更新状态为 “可拖拽”
  if (
    !isEnableDragging &&
    (Math.abs(e.clientX - startPos.x) > blockStep ||
      Math.abs(e.clientX - startPos.x) > blockStep)
  ) {
    isEnableDragging = true;
  }
  if (isPressing) {
    if (isEnableDragging) {
      // “可拖拽” 状态，调用工具的 drag 方法
      currentTool.drag(e);
    }
  } else {
    currentTool.move(e);
  }
}
function handleUp(e) {
  currentTool.end(e);
  // 初始化状态
  isPressing = false;
  isEnableDragging = false;
  startPos = null;
}