为啥我不能在 td >p 元素上添加“keydown”事件？

Posted 2023-03-17

【中文标题】为啥我不能在 td >p 元素上添加“keydown”事件？

【英文标题】：Why I can't add "keydown" event on td >p element?为什么我不能在 td >p 元素上添加“keydown”事件？

【发布时间】：2022-01-24 00:31:26

【问题描述】：

当用户在 td 元素内的 p 标签内按下一个键时，我想触发一些动作，这里是我桌子上“td”的 html。

问题是当我将keydown 事件添加到每个段落元素时，我看不到任何响应。这是我的做法。

document.querySelectorAll('tr').forEach((row) => 
  if (row.rowIndex > 0) 
    row.querySelectorAll('td').forEach((cell) => 
      cell.contentEditable = true;
      cell.querySelectorAll('p').forEach((prg) => 
        prg.addEventListener('keydown', () => 
          console.log('test');
        );
      );
    );
  
);

<table>
  <tr></tr>
  <tr>
    <td data-property="phone" contenteditable="true">
      <p data-property="phone" class="sub-cell">34567890</p>
      <p data-property="phone" class="sub-cell">5511525298ss</p>
      <p data-property="phone" class="sub-cell">5511525298</p>
    </td>
  </tr>
</table>

我在“td”元素上有一些其他的“keydown”事件，但是当我删除它们时它仍然无法正常工作。

当我使用“click”事件而不是“keydown”时，我得到了我期望的响应。

我在https://www.w3schools.com/Jsref/event_onkeydown.asp 读到“p”和表格元素支持 keydown 事件。

我需要获取正在进行文本编辑的 p 以更新服务器信息，因此在表格单元格上添加事件对我不起作用。

非常感谢您对此提供的任何帮助、阅读链接或建议。

【参考方案1】：

如果您将 contentEditable 移到段落标签上，它将起作用。

document.querySelectorAll('tr:not(:first-child) td p').forEach((prg) => 
  prg.setAttribute('contentEditable', true);

  prg.addEventListener('keydown', () => 
    console.log('test');
  );
);

<table>
  <tr>
    <td colspan='10'>First row</td>
  </tr>
  <tr>
    <td data-property="phone">
      <p data-property="phone" class="sub-cell">34567890</p>
      <p data-property="phone" class="sub-cell">5511525298ss</p>
      <p data-property="phone" class="sub-cell">5511525298</p>
    </td>
  </tr>
</table>