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'哦！

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

1 个答案: