JSFiddle - React, Tailwind, and code Playground

by somya_kashyap3

HTML

<body onload="load();">

<table id="t-daddy" onclick="alert('hi');">
  <tr id="tbl1">
    <td id="c1">one</td>
  </tr>
  <tr>
    <td id="c2">two</td>
  </tr>
</table>

</body>

CSS

#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }

JavaScript

function stopEvent(event) {
	c2 = document.getElementById("c2");
  c2.innerHTML = "hello";

  // this ought to keep t-daddy from getting the click.
  //event.stopPropagation();
  alert("event propagation halted.");
}


function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent(event), false);
}