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处理程序永远不会执行。控制台永远不会输出按键！＆＃39;。它可能与循环有关，虽然当我检查任何类似的SO问题时，它只有最后一个元素执行。在这种情况下，click事件工作正常但是keyup事件永远不会执行，即使我使用了最后一个元素。

注意：

我更喜欢非jquery解决方案。

Answer 1

<td>默认情况下不可聚焦，毕竟它不需要输入。但是你可以使它具有人工可聚焦性，一种方法是为它设置tabindex。事实上我不喜欢这种方式，也许有人知道更好的属性（但它有效）。

＆＃13;

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!");
    });
    }

＆＃13;

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

＆＃13;

（您的事件处理程序需要一些修复，与event本身相关）

DOM addEventListener：单击工作但不是keyup

1 个答案: