Javascript 在选择正确的画布时，如何执行addEventListener函数？

我根据div编号创建了一些画布。这意味着总的div数就像一个随机数。 如果我创建了5个div，并基于div编号使用createElement（“canvas”），那么如何使用addEventListener进行正确的画布？ 举个例子，我想使用mousedown事件在第二个画布上画一条线。在第二张画布上画完线后，我想在第一张画布上画一条线

这是我的代码：

  for (i = 0; i < DivNumber; i++){
    var canvas = document.createElement("canvas");
    continer.appendChild(canvas)
    canvas.height = window.height
    canvas.width = window.width
  }
  canvas = document.querySelectorAll('canvas')[numPages]
  var context = canvas.getContext('2d')
  for (const ev of ["touchstart", "mousedown"]) {
    canvas.addEventListener(ev, Start)
  }
  
  for (const ev of ['touchmove', 'mousemove']) {
    canvas.addEventListener(ev, move)
  }
  
  for (const ev of ['touchend', 'touchleave', 'mouseup']) {
    canvas.addEventListener(ev, End)
  };

for（i=0；i

。是否要将这些侦听器添加到每个画布？还是仅仅是一张特定的画？@ChrisG我想他希望第二张画布在第一张画布上复制正在绘制的图形。@ChrisG在这种情况下，我只能在第一张画布上画一条线。如何绘制另一个画布？您可以将这三个for循环移动到第一个for循环中。它有一个

canvas

变量，因此应该可以正常工作

querySelectorAll

返回匹配项列表；您不能使用结果一次处理多个元素，这只适用于jQuery。据我所知，问题是您没有计算画布坐标。在您的应用程序中，所有画布都与窗口一样大，因此对于第二个画布，pageX和pageY坐标将不再位于画布内。您需要减去canvas元素的左上角，以获得绘图的画布坐标。请注意，在事件处理程序函数中，

e.target

是当前画布。您可以使用它来获取其坐标，并获取画布的上下文。