DOM addEventListener：單擊有效，但不起作用

Question

我在頁面上有一張桌子。 每個單元格應具有一個單擊處理程序和一個按鍵處理程序。

var c = document.querySelectorAll('.cell');
for (var i = 0; i < c.length; i++) {
  f = function() {
    console.log('key pressed!');
    if (keyCode >= 49 && keyCode <= 57) {
      this.innerHTML = (keyCode - 48).toString();
    }
    console.log(keyCode);
  };
    c[i].addEventListener('keyup', f);
    c[i].addEventListener('click', function() {
        console.log("clicked!");
    });

問題：

keyup處理程序永遠不會執行。 控制台從不輸出“按鍵按下！”。 它可能與循環有關，盡管當我檢查任何類似的SO問題時，它只是執行了最后一個元素。 在這種情況下，即使我使用了最后一個元素，click事件也可以正常工作，但是keyup事件永遠不會執行。

注意：

我寧願使用非jquery解決方案。

Answer 1

默認情況下， <td>不能聚焦，它根本不需要輸入。 但是您可以使其變得有針對性，一種方法是為其設置tabindex 。 實際上，我不喜歡這種方式，也許有人知道更好的屬性（但它可以工作）。

 var c = document.querySelectorAll('.cell'); for (var i = 0; i < c.length; i++) { f = function(event) { console.log('key pressed!'); if (event.keyCode >= 49 && event.keyCode <= 57) { this.innerHTML = (event.keyCode - 48).toString(); } console.log(event.keyCode); }; c[i].addEventListener('keyup', f); c[i].addEventListener('click', function() { console.log("clicked!"); }); } 

 <table border="1"> <tr> <td class="cell" tabindex="0">I have tabindex</td> <td class="cell">I have no tabindex</td> </tr> </table> 

（您的事件處理程序需要一些與event本身相關的修復程序）