javascript - Isolate click listener in overlapping row and button

Question

I have a table as below: one column shows text, the other column contains buttons. I need to implement two different actions: one when the row itself is clicked, one when the button is clicked.

But in the code below, I cannot isolate the two events when I click the buttons: meaning, both actions are executed since the row is also considered as "clicked". How do I isolate the two events? I have to use appendChild as the button is created dynamically in my actual code. Thanks.

var r1cell2 = document.getElementById('r1cell2');
var r1c2Button = document.createElement("button")
r1c2Button.innerHTML = "R1C2"
r1cell2.appendChild(r1c2Button)

let r1 = document.getElementById("r1")
r1.addEventListener("click", () => {
  alert("R1 clicked")
})

r1c2Button.addEventListener("click", () => {
  alert("R1C2 Button clicked")
})

<table id="tableId">
  <tr id="r1">
    <td id="r1cell1">Cell R1C1</td>
    <td id="r1cell2"></td>
  </tr>
  <tr id="r2">
    <td id="r2cell1">Cell R2C1</td>
    <td id="r2cell2"></td>
  </tr>
</table>

question from:https://stackoverflow.com/questions/65886806/isolate-click-listener-in-overlapping-row-and-button

Answer 1

You can use event.stopPropagation() to contain event handling at button-level.

var r1cell2 = document.getElementById('r1cell2');
var r1c2Button = document.createElement("button")
r1c2Button.innerHTML = "R1C2"
r1cell2.appendChild(r1c2Button)

let r1 = document.getElementById("r1")
r1.addEventListener("click", () => {
  console.log("R1 clicked")
})

r1c2Button.addEventListener("click", (e) => {

  e.stopPropagation();
  // ^^^^^ Here you can stop event being passed to upper level event listener
  
  console.log("R1C2 Button clicked")
})

<table id="tableId">
  <tr id="r1">
    <td id="r1cell1">Cell R1C1</td>
    <td id="r1cell2"></td>
  </tr>
  <tr id="r2">
    <td id="r2cell1">Cell R2C1</td>
    <td id="r2cell2"></td>
  </tr>
</table>