Как узнать, какой элемент был нажат? - PullRequest
Новая
       23

Как узнать, какой элемент был нажат?

0 голосов
/ 29 апреля 2011

Я пытаюсь найти удивительно сложную задачу, чтобы выяснить, какой элемент был нажат.У меня есть эти функции из 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, который вызвал событие?

1 Ответ

0 голосов
/ 29 апреля 2011

Вы имеете дело с Событием, всплывающим .

По сути, ваш щелчок по дочернему элементу всплывает через всех родителей этого ребенка;если с этими родителями связан обработчик кликов, он будет выполняться.

В псевдокоде: вы можете видеть, какой элемент является вашей текущей целью, и если это не 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'ой!

...