JavaScript onClick on embedded elements

Question

I have the following JavaScript:

<div>
    <tr onClick="click1()">
        <td>
            click 1
        </td>
        <td onClick="click2()">
            click 2
        </td>
    </tr>
</div>

function click1() {
  alert(1);
}

function click2() {
  alert(2);
}

<table border="1">
  <tr onClick="click1()">
    <td>
      click 1
    </td>
    <td onClick="click2()">
      click 2
    </td>
  </tr>
</table>

If I click 'click 1', the click1() function is called as expected. If I click 'click 2', the click1() & click2() functions are both called.

Question

How do I make the click on 'click 2' only call the click2() function, and not call the click1() function?

The fact that there are two different "answers" to this question hints at the fact it should be closed as it does not show any research effort. — Armen Michaeli
– Armen Michaeli, Commented Oct 21, 2021 at 11:07
@noah1400, thanks for your reply. I cannot, because what I am trying to achieve is if the user click on the row, it calls function click1(). However, if they click on a specific item in the row it calls function click2(). — Richard
– Richard, Commented Oct 21, 2021 at 11:07

Dan P · Accepted Answer · 2021-10-21 11:07:28Z

1

Well, the easiest way is just to move your 'click 1' trigger to the button itself:

<div>
    <tr>
        <td onClick="click1()">
            click 1
        </td>
        <td onClick="click2();">
            click 2
        </td>
    </tr>
</div>

However, I'm assuming you want to keep the click 1 trigger where it is, in which case you can add event.stopPropagation() to the event:

<div>
   <tr onClick="click1();">
       <td>
           click 1
       </td>
       <td onClick="click2(); event.stopPropagation();">
           click 2
       </td>
   </tr>
</div>

answered Oct 21, 2021 at 11:07

Dan P

9348 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript onClick on embedded elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related