Клик по parent
 

Столкнулся со следующей задачей:
есть <table>-<tr>-<td>, внутри <td> есть <div>, внутри у <div> есть три <span> элемента.

Мне нужно, чтобы при клике на любое из содержимого <td> Javascript распознавал их как клик на сам <td>. По сути получается, на какой элемент кликаешь, тот и является target.

Пробовал в стилях прописать z-index с большим значением для <td> по отношению к его содержимому (<div>, <span>) . Не дало нужного результата.

Вот набросок, где функция показывает, по какому элементу был сделан click.
Прошу подсказать решение.

http://jsbin.com/mocajahalu/2/edit?html,css,js,output

Alexander Belov,
http://learn.javascript.ru/event-delegation

рони,
благодарю за ссылку

+ Если кому-то интересно решение:
http://jsbin.com/tedasihino/1/edit?html,css,js,output

Alexander Belov,
решение по ссылке вы видимо вы не прочитали

рони,
Пока только просмотрел. В пн буду разбираться с делегированием.

Alexander Belov,
если вы вложите ещё элемент то вам придётся добавлять ещё if - по ссылке решение для любой вложенности элементов

рони,
Ради интереса проверил. Вроде бы, не обязательно if добавлять, можно просто дописать в уже существующее условие новый parent. Нвпример, мы добавили в <span> элемент <a>.
Тогда условие выглядит следующим образом:
document.addEventListener('click',function (e) {
var parentTarget = null;

if (e.target.tagName === "TD") {
parentTarget = e.target;
} else if (e.target.parentElement.tagName === "TD" || "span") {
parentTarget = e.target.parentElement;
}

alert(parentTarget);
e.preventDefault();
}, false);

Alexander Belov,
:(