动态Canvas元素的事件处理：点击Canvas下移的实现疑问

核心问题 #

你当前的代码存在两个关键问题：

1. 循环变量共享导致索引错误：循环中绑定事件时，move(n)里的n是全局循环变量，当循环结束后n的值是10，点击任意canvas都会调用move(10)，但canv数组只有0-9的索引，导致找不到对应的canvas元素。
2. 样式属性缺少单位：style.top=t没有添加px单位，浏览器无法识别这个位置值，移动效果不会生效。

事件参数e与this的区别 #

• this：在事件监听器的回调函数中，this直接指向触发事件的DOM元素（也就是你点击的那个canvas）。
• e.target：事件对象e的target属性同样指向触发事件的元素，和this效果基本一致；如果存在事件冒泡，e.target是实际触发的元素，this是绑定事件的元素，这里直接绑定在canvas上，两者没有区别。

修正方案 #

方案1：用this传递被点击的canvas（最简洁）

直接在事件回调中把this传给move函数，让move直接操作目标canvas：

var n=0, canv=[], ct=[]
var body = document.getElementsByTagName("body")[0];

for (n=0; n<10; n++){ // 创建10个canvas
 canv[n] = document.createElement('canvas');
 canv[n].id = "C"+n;
 canv[n].width = rnd(300);
 canv[n].height = rnd(300);
 canv[n].style.zIndex = n;
 canv[n].style.position = "absolute";
 canv[n].style.border = "2px solid";
 // 初始位置设为随机坐标，避免重叠
 canv[n].style.top = rnd(500) + 'px';
 canv[n].style.left = rnd(800) + 'px';
 // 给每个canvas绑定初始top值，用于独立计数
 canv[n].dataset.top = parseInt(canv[n].style.top);

 body.appendChild(canv[n]);
 ct[n] = canv[n].getContext("2d");

 // 事件绑定：用this传递当前canvas
 canv[n].addEventListener('mousedown', function () {
    move(this);
 });
}

function move(canvas){
 // 每次向下移动5px，步长可调整
 let currentTop = parseInt(canvas.dataset.top) + 5;
 canvas.dataset.top = currentTop;
 canvas.style.top = currentTop + 'px';
}

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

方案2：用事件对象e.target传递

和方案1逻辑一致，只是把this换成e.target：

// 事件绑定部分修改为：
canv[n].addEventListener('mousedown', function (e) {
    move(e.target);
});
// move函数和方案1完全相同

方案3：保留索引传递（解决闭包问题）

如果想通过索引num传递，需要用立即执行函数在循环中保存每个n的值，避免共享变量问题：

var n=0, canv=[], ct=[]
var body = document.getElementsByTagName("body")[0];

for (n=0; n<10; n++){
 // ... 其他初始化代码和方案1一致

 // 用立即执行函数保存当前n的值
 (function(num) {
    canv[num].addEventListener('mousedown', function () {
        move(num);
    });
 })(n);
}

function move(num){
 let canvas = canv[num];
 let currentTop = parseInt(canvas.dataset.top) + 5;
 canvas.dataset.top = currentTop;
 canvas.style.top = currentTop + 'px';
}

// rnd函数不变

额外优化点 #

• 给每个canvas设置随机的初始left和top，避免创建时重叠在一起。
• 用dataset.top保存每个canvas的当前位置，实现独立移动（如果共用全局t，点击不同canvas会接着同一个数值累加，不符合“点击哪个哪个移动”的预期）。

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