Javascript 我如何知道单击了哪个元素？

我正在尝试一项异常困难的任务，即找出单击了哪个元素。我从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呢？

您正在处理的问题

基本上，你对一个子元素的点击会在该子元素的所有父母中产生气泡；如果这些父对象绑定了一个click处理程序，它将执行

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

使用您的示例，它看起来是这样的（您的示例简化了一点；实际上，您需要更健壮的东西）：

请注意，这仅适用于您的示例；在现实世界中，您可能需要迭代备份DOM树，将

parentNodes

与您感兴趣的元素进行比较，直到找到您要查找的元素

大多数JavaScript库都会为您抽象出这一点（例如，jQuery为它发送的所有事件设置一个

currentTarget

属性，该属性引用您需要的元素，封装了所有遍历工作）。使它变得更容易，但自己编写并不可怕，我反对将整个JavaScript库的开销包括在内，如果您只需要这样做的话。：-）

---

编辑：完全破坏了我的格式！哦

我强烈鼓励你考虑使用一个像jQuery这样的框架来做一个像这样琐碎的任务。@ MigelToMe，所以这个任务是复杂的，没有框架的参与。它并不复杂和牵涉，它比它需要的要复杂得多。哪个浏览器？您是否在中看到这种行为？您可以测试obj.tagName-如果它是img，您可以查看obj.parentNode是否是可以使用的div谢谢！特别感谢你帮助我了解发生了什么，而不仅仅是为我做。我没有使用if语句，而是使用了一个while循环，它会一直运行，直到找到一个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;
}