我怎么知道点击了哪个元素？

Question

我正在尝试发现被单击的元素这一令人惊讶的艰巨任务。我具有Head First AJAX的这些功能：

function getActivatedObject(e) {
  var obj;
  if (!e) {
    obj = window.event.srcElement;
  } else if (e.srcElement) {
    obj = e.srcElement;
  } else {
    obj = e.target;
  }
  return obj;
}

function addEventHandler(obj, eventName, handler) {
  if (document.attachEvent) {
    obj.attachEvent("on" + eventName, handler);
  } else if (document.addEventListener) {
    obj.addEventListener(eventName, handler, false);
  }
}

和我的代码：

mainPane = document.getElementById("mainDiv");
contactPane = document.getElementById("contactDiv");
addEventHandler(mainPane, "click", openFunction);
addEventHandler(contactPane, "click", openFunction);

function openFunction(e) {
  var me = getActivatedObject(e);
  //Some other stuff
}

[不幸的是，me变量有时指的是div，但有时指的是div内的图像。即使图像没有onclick功能或任何其他类型的事件！那么如何获取触发事件的div？

Answer 1

您正在处理Event bubbling。

[基本上，您对孩子元素的点击会在该孩子的所有父母中冒出；如果这些父母有绑定的点击处理程序，它将执行。

使用伪代码：您可以看到当前目标是什么元素，如果它不是DIV，则知道需要查找该元素的父元素。

使用您的示例，看起来像这样（为您的示例简化了一些；实际上，您需要更强大的功能：]]]

function getActivatedObject(e) {
  var obj;
  if (!e) {
    obj = window.event.srcElement;
  } else if (e.srcElement) {
    obj = e.srcElement;
  } else {
    obj = e.target;
  }

  // Images are direct children of our DIV. If our source element was an img, we should
  // fetch its parent
  if(obj.tagName.toLowerCase() === "img"){
      obj = obj.parentNode;
  }

  return obj;
}
请注意，这仅适用于您的示例；在现实世界中，您可能需要迭代备份DOM树，将parentNodes与您感兴趣的元素进行比较，直到找到所需的内容为止。

[大多数JavaScript库为您提供了抽象方法（例如，jQuery为其分配的所有事件设置了currentTarget属性，它引用了您需要的元素，并为您封装了所有遍历工作）”。使它变得更容易，但是自己编写并不是一件很糟糕的事情，如果您需要做的话，我不赞成包括整个JavaScript库的开销。 :-)

编辑：完全破坏了我的格式！ D'oh！