表格每一行的 HTML 事件监听器

Question

问题来了：

• 我有一个表，其中的行包含按键侦听器
• 每一行都是 contentEditable
• 我想让包装的 tbody 元素内容可编辑（以允许通过单击和拖动来选择多行）
• 如果我确实使 tbody contentEditable 按键事件不再 在行中触发
  • 只有 tbody 元素接收事件

主要问题是将 tbody 设置为可编辑会掩盖表格行的按键事件

编辑： 是否有任何形式的指针事件：键盘事件没有？

如何让行仍然接收事件，或者如何在不使 tbody/table 内容可编辑的情况下启用拖动和选择？

非常感谢任何反馈或帮助，谢谢！

---

如果描述不清楚，这里是一个示例代码 sn-p：

<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

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.

Answer 2

您可以使用element.target 查看实际点击的是哪个元素。例如，在我的 sn-p tbody 和 tr 中具有 contenteditable 但正如您在控制台中看到的那样，element.target 和 element.currentTarget 都检索不同的字段，因此您知道可以这样使用它.

但我可能只推荐使用 div，因为它们更容易使用。

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>