CODEWITHSUNDEEP
javascriptjqueryhtml
Pranjal
Pranjal

Reputation: 806

Conflicting Events in Nested HTML elements

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?

Upvotes: 2

Views: 1372

Answers (2)

Adil
Adil

Reputation: 148130

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

Upvotes: 1

benedict_w
benedict_w

Reputation: 3608

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?

Upvotes: 1

Related Questions