HTML要素が1つのイベントをリッスンしてから別のものをリッスンする

私がやりたいことは、1つの表のセル要素が1つのonclick（）イベントをリッスンし、このイベントが発生したときに何かしてから別のキーボードイベントリスナーをこのテーブルのセル要素に追加しますが、新しいイベントリスナーが追加されても動作しないようです。HTML要素が1つのイベントをリッスンしてから別のものをリッスンする

Iは、HTMLタグによって作成された10×10のテーブルを有し、それらの各々は0からここ99

にIDが割り当ては、自分のコードである：

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（）関数セル上のキーを押したときに呼び出されず、さらに、セルがクリックされた後にコンソールに「真」が2回表示されました。

誰にでも私にこの問題はありますか？そして私の目標を達成するためにそれを修正する方法。どうもありがとう。

出典

2016-04-30 user5220361

ログにはどのような情報が表示されますか？あなたのコードはどこに届きますか？ –

セルのキーを押したときにhandleInput（）関数が呼び出されず、コンソールに 'true'が2回表示された場合、新しいキーボードイベントリスナーが正常に追加されたことを意味します。ありがとう！ – 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要素にキーボードイベントリスナーを添付しています。あなたは以下のようにtd要素にtabindexを追加することができます。

<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要素が1つのイベントをリッスンしてから別のものをリッスンする

答えて

関連する問題