2

I have nested event listeners. Exactly they are

<tr onclick="function1();">
<td>....</td>
<td onclick="function2();">....</td>
</tr>

When Second Cell is clicked, only function2() should be called and not function1(). Is there any way to do this?

1
  • if you are using a function on td, i think there is no use of tr cause tr is departed by one or many table datas(tds)
    – polin
    Commented Oct 20, 2012 at 8:41

2 Answers 2

1

The event can be stopped using event.stopPropagation

function(e) {
   var event = e || window.event;
   event.stopPropagation();
}

See the answer here for more discussion: How to stop event propagation with inline onclick attribute?

1
  • Great! This worked. I had already tried return false. I could not make it work. Thanks
    – Pranjal
    Commented Oct 20, 2012 at 8:55
1

Pass event object in the function and call stopPropagation to stop event propogation.

Live Demo

<tr onclick="return function1(e);">
  <td>First Td....</td>
 <td onclick="return function2();">second td....</td>
</tr>

function function2(e)
{
  //your statements.
   alert("function2");
   e.stopPropagation();
}
3
  • does anyone understand why return false doesn't work in this case?
    – benedict_w
    Commented Oct 20, 2012 at 9:09
  • @Adil Yes, adding event.stopPropagation solved the problem. I also don't get why return false did not work.
    – Pranjal
    Commented Oct 20, 2012 at 9:24
  • That works for jquery and I use that often. jquery has provided custom functionality with return.
    – Adil
    Commented Oct 20, 2012 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.