HTML eventlistener on each row of table

Question

Here is the problem:

• I have a table with rows that have keypress listeners
• Each row is contentEditable
• I want to make the wrapping tbody element contentEditable (to allow selecting multiple rows by click and dragging)
• If I do make tbody contentEditable the keypress event is no longer triggered in the rows
  • only the tbody element recieves the event

The main issue is that setting tbody as editable obscures the keypress events for the table rows

EDIT: Is there any form of pointer-events:none for keyboard events?

How can I have the rows still recieve the event or how can I enable drag and select without making tbody/table contentEditable?

Would appreciate any feedback or help, thanks!

---

Here is an example code snippet if the description is unclear:

<style>
    table{
      background-color: cyan;
    }
    table, th,td, tr{
      border: 1px solid black;
      border-collapse: collapse;
    }
    
    tr,td, th {
      padding: 3px;
      text-align: left;
      height: 2em;
    }
    
</style>

<div>
<table>
  <thead style = "background-color:white">
    <tr>
      <th>Value</th>
    </tr>
   </thead>
   <tbody> <!-- need to make this tbody contenteditable -->
    <tr contenteditable = 'true' onkeypress='keyPressed(event)'>
        <td>v1</td>
    </tr>
    <tr contenteditable = 'true' onkeypress='keyPressed(event)'>
        <td>v2</td>
    </tr>
   </tbody>
</table>
</div>

<script>
    function keyPressed(){
        if(event.keyCode == 13){
          event.preventDefault();
          row = event.target;
          row.insertAdjacentHTML('afterend',"<tr contenteditable = 'true' onkeypress='keyPressed(event)'><td></td></tr>");
          row.nextSibling.focus();
        }
    }
</script>

Answer 1

You can use element.target to see which element is actually being click on. For example, in my snippet tbody and the tr has contenteditable but as you can see in the console, element.target and element.currentTarget both retrieve a different field so you know you can use it that way.

But I would probably just recommend using divs instead, as they will be easier to work with.

document.querySelector('[contenteditable]').addEventListener("click", function(el) {
   console.log(el.target,el.currentTarget)
});
/*
    function keyPressed() {
      if (event.keyCode == 13) {
        event.preventDefault();
        row = event.target;
        row.insertAdjacentHTML('afterend', "<tr contenteditable = 'true' onkeypress='keyPressed(event)'><td></td></tr>");
        row.nextSibling.focus();
      }
    }*/

table {
  background-color: cyan;
}

table,
th,
td,
tr {
  border: 1px solid black;
  border-collapse: collapse;
}

tr,
td,
th {
  padding: 3px;
  text-align: left;
  height: 2em;
}

<div>
  <table>
    <thead style="background-color:white">
      <tr>
        <th>Value</th>
      </tr>
    </thead>
    <tbody contenteditable='true'>
      <!-- need to make this tbody contenteditable -->
      <tr contenteditable='true'>
        <td>v1</td>
      </tr>
      <tr contenteditable='true'>
        <td>v2</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

document.querySelectorAll('contenteditable td')
.forEach(e => e.addEventListener("click", function() {
    // Here, `this` refers to the element the event was hooked on
    console.log("clicked")
}));

lear more.