如何为原生JS卡牌游戏中动态生成的div绑定拖拽相关事件

云原生阿岚

2026-10-6

解决方案

问题核心原因

你的事件绑定只作用于页面初始加载时已存在的元素，后续动态生成的.new-flipped-card元素没有被绑定事件监听器，所以触发不了拖拽逻辑。

实现方案：使用事件委托

直接把事件绑定在始终存在的父容器（也就是ID为FLIPPED_CARDS_ID的容器）上，通过事件冒泡机制判断触发事件的目标是否为需要拖拽的卡牌元素，不需要给每个动态生成的卡牌单独绑定事件。

修改后的完整代码

拖拽逻辑代码

// 给始终存在的父容器绑定mousedown事件
const cardContainer = getDOMElement(FLIPPED_CARDS_ID);
cardContainer.addEventListener("mousedown", mouseDown);

const mouseDown = (e) => {
  // 判断点击的目标是否为.new-flipped-card元素，支持点击卡牌内部子元素也能触发
  const activeCard = e.target.closest('.new-flipped-card');
  // 不是目标卡牌直接终止逻辑
  if (!activeCard) return;

  let prevX = e.clientX;
  let prevY = e.clientY;

  const mouseMove = (e) => {
    let newX = prevX - e.clientX;
    let newY = prevY - e.clientY;
    // 用当前点击的卡牌代替原来固定的card变量
    const rect = activeCard.getBoundingClientRect();
    activeCard.style.left = rect.left - newX + "px";
    activeCard.style.top = rect.top - newY + "px";
    prevX = e.clientX;
    prevY = e.clientY;
  };
  window.addEventListener("mousemove", mouseMove);
  const mouseUp = () => {
    window.removeEventListener("mousemove", mouseMove);
    window.removeEventListener("mouseup", mouseUp);
  };
  window.addEventListener("mouseup", mouseUp);
};