javascript - 我如何知道哪个元素被点击？

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 .

基本上，您对子元素的点击会通过该子元素的所有父元素向上冒泡；如果这些父级绑定(bind)了点击处理程序，它将执行。

在伪代码中:您可以看到当前目标是什么元素，如果它不是 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 库的开销。 :-)

编辑:完全破坏了我的格式!哦!