为什么我的事件监听器只适用于最后一个元素？

Question

问题在于，当我拖放图片时，它总是放在最后一个字母上。 这是我正在谈论的图像：

这是我的代码：

function mattes_draw_letter(x, y, width, height, letter, position)
{
  var canvas = document.createElement('canvas');
  canvas.style.position = "absolute";
  canvas.style.top = 0 + "px";
  canvas.id = "canvas_opening_" + position;
  canvas.style.zIndex = 5;

  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 1;
  ctx.fillStyle = '#bfbfbf';
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  ctx.moveTo(x + letter[0] * width, y + letter[1] * height);
  for (i = 0; i < letter.length; i+=2)
  {
    if (typeof letter[i+3] !== 'undefined')
    {
      ctx.lineTo(x + letter[i+2] * width, y + letter[i+3] * height);
    }
  }

  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  $("#mattes").append(canvas);
  canvas.addEventListener("drop", function(event) {drop(event, this);}, false); 
  canvas.addEventListener("dragover", function(event) {allowDrop(event);}, false); 
  canvas.addEventListener("click", function() {photos_add_selected_fid(this);}, false); 
}

以下是包含for循环的代码：

function mattes_create_openings(openings)
{
  var opening_array = new Array();
  var x = 0;
  var y = 0;
  var opening_width = 0;
  var opening_height = 0;

  $(openings).each(function(i, el) {

    x = $(el).find("x").text() * ppi;
    y = $(el).find("y").text() * ppi;
    opening_width = $(el).find("width").text() * ppi;
    opening_height = $(el).find("height").text() * ppi;
    var type = $(el).find("type").text();
    var text = $(el).find("text").text();
    var ellipse = (type == "ellipse") ? " border-radius: 50% " : "";
    if ("letter" == type)
    {
      var letter = mattes_get_letter_array(text);

      var letter_width = (opening_width - (text.length * 0.5 * ppi)) / text.length;
      var space = 0.5 * ppi;
      var letterX = x;
      var letterY = y;
      var letter_height = opening_height;

      mattes_draw_letter(letterX, letterY, letter_width, letter_height, letter, i);
      letterX += (space + letter_width);

    }
    else
    {
      $("#mattes").append("<div id='opening_" + i + "' style='background-color: #bfbfbf; position: absolute; left: " + x + "px; top: " + y + "px; height: " + opening_height + "px; width: " + opening_width + "px; overflow: hidden; z-index: 4;" + ellipse + "'  ondrop='drop(event, this)' ondragover='allowDrop(event)' onclick='photos_add_selected_fid(this);'>&nbsp;</div>");
    }

    //TODO multiple openings max/min -x,y,width, height
    opening_array["x"] = x;
    opening_array["y"] = y;
    opening_array["opening_width"] = opening_width;
    opening_array["opening_height"] = opening_height;
  });
  return opening_array;      
}

Answer 1

你需要在函数调用中将代码包装在$ .each中，如下所示：

 $(openings).each(function(i, el) {
    bindEvents(i, el);
 };
 function bindEvents(indx, ele) {
    // Code what you have written inside $.each originally
 };

Answer 2

问题不是事件处理程序，而是画布的大小。创建的最后一个画布位于其他画布之上，因此它是唯一被激活的事件。