一個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元素監聽一個事件，然後監聽另一個事件

回答

相關問題