Conflicting Events in Nested HTML elements

Question

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?

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, Oct 20 '12 at 08:41

Adil · Answer 1 · 2012-10-20T09:07:01.747

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();
}

edited Oct 20 '12 at 09:07

answered Oct 20 '12 at 08:34

Adil

146,340
25
209
204

does anyone understand why `return false` doesn't work in this case? – benedict_w Oct 20 '12 at 09:09
@Adil Yes, adding event.stopPropagation solved the problem. I also don't get why return false did not work. – Pranjal Oct 20 '12 at 09:24
That works for jquery and I use that often. jquery has provided custom functionality with return. – Adil Oct 20 '12 at 09:27

score 1 · Accepted Answer · edited May 23 '17 at 10:34

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?

edited May 23 '17 at 10:34

Community

1
1

answered Oct 20 '12 at 08:35

benedict_w

3,543
1
32
49

Great! This worked. I had already tried return false. I could not make it work. Thanks – Pranjal Oct 20 '12 at 08:55

Conflicting Events in Nested HTML elements

2 Answers2