一行代码修改导致Canvas拖拽事件失效的奇怪问题

问题描述 #

我正在编写类Windows界面的代码，以下代码会创建10个可拖拽的Canvas对象，它们尺寸随机，点击后边框变粗并可拖动。但当我添加一行代码canv[n].style.top=10*n（用于让窗口按10px递增堆叠）后，拖拽功能便失效了。仅做此微小改动为何会导致功能异常？

原代码 #

var n = 0,
  canv = [],
  ct = []
var body = document.getElementsByTagName("body")[0];
var targ, wind = 10,
  i, offx, offy = 0
for (n = 0; n < wind; n++) {
  canv[n] = document.createElement('canvas');
  canv[n].id = "C" + n;
  canv[n].width = rnd(30 * n);
  canv[n].height = rnd(30 * n);
  //canv[n].style.top=10*n     <- This line stops the drag effect working
  canv[n].style.zIndex = n;
  canv[n].style.position = "absolute";
  canv[n].style.border = "2px solid";

  body.appendChild(canv[n]);
 targ=canv[0]    // added now to stop errors before first click
  ct[n] = canv[n].getContext("2d");
  ct[n].fillText(n, canv[n].width / 2, canv[n].height / 2)

  canv[n].addEventListener('mousedown', function(e) {
    targ = e.currentTarget
    if (targ.style.border == "2px solid") {
      for (i = 0; i < wind; i++) {
        canv[i].style.border = "2px solid"
      }
      targ.style.border = "5px solid";
      offy = e.y - targ.style.top
    } else {
      targ.style.border = "2px solid"
    }
  });
  canv[n].addEventListener('mousemove', function(e) {
    if (targ.style.border == "5px solid") {
      move(e.x, e.y)
    }
  });
}

function move(x, y) {
  targ.style.top = y - offy
}

function rnd(m) {
  return Math.floor(Math.random() * m)
}

原因分析 #

核心问题出在CSS单位缺失与字符串数值运算错误：

• 当设置canv[n].style.top=10*n时，赋值的是纯数字（如10、20），但CSS的top属性必须带单位（如px），浏览器会将其视为无效样式；更关键的是后续运算逻辑出错。
• 在mousedown事件中，offy = e.y - targ.style.top这行代码里，targ.style.top此时是带单位的字符串（比如"10px"），和数字类型的e.y相减时，会被JS解析为NaN（非数字）。
• 后续move函数中y - offy的结果也是NaN，无法正确设置top值，直接导致拖拽功能失效。
• 未添加该行代码时，targ.style.top是空字符串，JS会将其隐式转为0，所以运算能正常执行。

修复方案 #

1. 给top赋值时添加px单位 #

修改那行注释掉的代码：

canv[n].style.top = `${10 * n}px`

2. 修正offy的计算逻辑 #

将offy的计算改为解析字符串为数字：

offy = e.y - parseInt(targ.style.top || 0, 10);

3. 给move函数的top值添加单位 #

修改move函数：

function move(x, y) {
  targ.style.top = `${y - offy}px`
}

额外优化 #

原代码中mousemove事件绑定在Canvas上，只有鼠标在Canvas范围内移动才会触发拖拽，建议将mousemove事件绑定到document上，这样拖拽时鼠标移出Canvas也能继续拖动：

// 替换原有的mousemove绑定代码
document.addEventListener('mousemove', function(e) {
  if (targ && targ.style.border == "5px solid") {
    move(e.x, e.y)
  }
});

内容的提问来源于stack exchange，提问作者EV123