检索单击元素的父级

Question

I've got a < table > - < tr > - < td > structure. Each < td > includes a < div > with three < span > inside. I need a function, which returns the clicked < td > every time I click either < td > or any of its elements (< div >, < span >#1, < span >#2, < span >#3).

What I tried is setting z-index property to < td > of higher value than one to < div > and < span > elements. Thus, I tried to "hide" them behind < td >, but it didn't work.

Here's what I've got now: http://jsbin.com/mocajahalu/2/edit?html,css,js,output

Please, help.

Answer 1

Try this...

document.addEventListener('click',function (e) {
   var parentEl = null;

   if (e.target.tagName === "TD") {
     // When user clicks on TD
     parentEl = e.target;
   } else if (e.target.parentElement.tagName === "TD") {
     // When user clicks on any of its child element (The DIVs and SPANs)
     // If user clicks on any child elements
     parentEl = e.target.parentElement;
   }

   // parentEl is the TD element
   alert(parentEl);
   e.preventDefault();
}, false);

Answer 2

try using parentNode an attribute of the current DOM node:

document.addEventListener('click',function (e) {
  alert('You clicked ' +e.target.parentNode);
  e.preventDefault();
},false);

That should do the trick!

To make sure that you have not clicked on the TD element itself you could check:

TDnode = e.target;
if (TDnode.nodeName!='TD') TDnode = TDnode.parent;

In case your spans could have child elements, you would have to check each parentNode until you have your TD node. If you use while(TDNode.nodeName!='TD') you have to make sure to check if parentNode is 'undefined' or not.