一个HTML元素监听一个事件，然后监听另一个事件

我想要做的是让一个表格元素监听一个onclick（）事件，当这个事件引发时，做一些事情然后添加另一个键盘事件监听这个表格单元元素，但它似乎不起作用，即使添加了新的事件监听器。一个HTML元素监听一个事件，然后监听另一个事件

我具有由html标签在10×10的表，并且它们中的每一个分配ID从0到99

这是我的代码：

for(i=0; i<100; i++){ 
     var cell = document.getElementById(i); 
     cell.addEventListener("click", handleClick); 
    } 

    function handleClick(e){ 
     var cell = e.target; 
     console.log(cell); 
     cell.addEventListener("keyup", handleInput); 
     console.log(true); 

     cell.removeEventListener("click", handleClick); 
     console.log(true);      
    } 

    function handleInput(e){ 
     var key = e.keyCode; 
     var i = e.target.id; 
     console.log(key); 
     document.getElementById(i).innerHTML = key; 
     }

的handleInput（）函数当我按下单元格上的一个按键时，不会调用它，此外，控制台在单击单元格后显示两次'true'。

谁能告诉我有没有这个问题？以及如何解决它以实现我的目标。非常感谢。

来源

2016-04-30 user5220361

什么信息是你的日志显示？直到你的代码到达哪里？ –

当我按下单元格上的某个键时，不会调用handleInput（）函数，此外，控制台显示'true'两次，表示新的键盘事件侦听器已成功添加。谢谢！ – user5220361

按原样工作。

for(var i=0; i<100; i++){ 
 
    var cell = document.getElementById(i); 
 
    cell.addEventListener("click", handleClick); 
 
    console.log("test") 
 
} 
 

 
function handleClick(e){ 
 
    var cell = e.target; 
 
    console.log(cell); 
 
    cell.addEventListener("keyup", handleInput); 
 
    console.log(true); 
 

 
    cell.removeEventListener("click", handleClick); 
 
    console.log(true);      
 
} 
 

 
function handleInput(e){ 
 
    var key = e.keyCode; 
 
    var i = e.target.id; 
 
    console.log(key); 
 
    document.getElementById(i).innerHTML = key; 
 
    document.getElementById("output").innerHTML = key; 
 
}

<html> 
 
    <table> 
 
    <td><input id="0"></td> 
 
    </table> 
 
    <div id="output"></div> 
 
</html>

来源

2016-04-30 15:20:39 SEUH

非常感谢！这似乎解决了我的问题。我认为可能出错的是，我让一个表单元格的HTML标签监听键盘事件。 – user5220361

而你在中加入了一个输入标签谢谢 – user5220361

问题是你附加的键盘事件侦听器，以静态的HTML元素。您可以添加tabindex到td元素象下面这样：

<td tabindex="0">something<td>

退房this question。

Reference - SCR29: Adding keyboard-accessible actions to static HTML elements

来源

2016-04-30 15:33:43 iplus26

这个答案比较透彻，谢谢！ – user5220361

一个HTML元素监听一个事件，然后监听另一个事件

回答

相关问题