在循环中分配的事件侦听器会触发所有事件

Question

balls 数组中的每个对象都分配了一个事件侦听器来提醒对象的颜色，但是当您只单击一个对象时，它会激活所有对象，提醒其中每个对象的颜色。

Fiddle，片段（听）：

function listen(obj, map, event, callback) {
  map.addEventListener(event, function (e) {
    if (hasPoint(obj.getBounds() || obj, event.clientX, event.clientY)) {
      callback.call(obj, e);
    }
  });
}

循环（处理程序分配）；

for (var b = 0; b < balls.length; b++) {
  (function(b) {
      listen(balls[b], map, 'click', function(e) {
        alert(this.color); // where `this` === balls[b]
      });
  }(b));
}

（注意：#listen 包含在 GitHub - utils.js 的外部文件中）

如何让每个对象只触发它自己的事件侦听器？

Answer 1

外部util.js是这里的关键，监听函数看起来像

function listen(obj, map, event, callback) {
  map.addEventListener(event, function (e) {
    if (hasPoint(obj.getBounds() || obj, event.clientX, event.clientY)) {
      callback.call(obj, e);
    }
  });
}

而且你喜欢

listen(balls[b], map, 'click', function(e) {
    alert(this.color); // where `this` === balls[b]
});

注意 listen() 函数中的 event 是字符串 click，不是实际事件，应该是 e，所以你要使用 e 获取坐标

function listen(obj, map, event, callback) {
  map.addEventListener(event, function (e) {
    if (hasPoint(obj.getBounds() || obj, e.clientX, e.clientY)) {
      callback.call(obj, e);
    }
  });
}

这就解决了问题

FIDDLE

在循环中分配的事件侦听器会触发所有事件

Event listener assigned in a loop triggers all of them

html

javascript

canvas

dom-events