Escイベントリスナーが機能していません

Question

keypressリスナーを追加しましたが、それは機能しません。 「クリック」のリスナーが呼び出されたとき、完璧に動作しています。

これはコードです：

var closeSave = document.getElementById("closeSave"); 
    closeSave.addEventListener("click", closeWindow); 
    closeSave.addEventListener("keypress", closeWindowByEsc); 

      // When the user clicks on <span> (x), close the modal 
     var closeWindow = function() { 
      saveModal.style.display = "none"; 
      loadModal.style.display = "none"; 
     } 

    var closeWindowByEsc = function(){ 
    if (!e) e = window.event; 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == '27'){ 
     closeWindow(e); 
    } 
    } 

問題何ができますか？

Answer 1

イベントには、eというイベントは渡されていません。

var closeSave = document.getElementById("closeSave"); 
closeSave.addEventListener("click", closeWindow); 
closeSave.addEventListener("keypress", function(e){ 
    if (!e) e = window.event; 
    var keyCode = e.keyCode; 
    if (keyCode == '27'){ 
     closeWindow(); 
    } 
}); 

// When the user clicks on <span> (x), close the modal 
function closeWindow() { 
    saveModal.style.display = "none"; 
    loadModal.style.display = "none"; 
} 

Answer 2

問題がvar func = function() { ...を宣言すると、スコープの上部にvar func;一部をホイスト、それラインに到達するまでfuncをfunction() { ...として定義されていないことです。あなたはイベントハンドラを添付するときに、これは何が起こっているのか、本質的である：

var closeSave = document.getElementById("closeSave"); 
var closeWindow; 
var closeWindowByEsc; 

// here, closeWindow and closeWindowByEsc are `undefined` 
closeSave.addEventListener("click", closeWindow); 
closeSave.addEventListener("keypress", closeWindowByEsc); 

// When the user clicks on <span> (x), close the modal 
closeWindow = function() { 
    saveModal.style.display = "none"; 
    loadModal.style.display = "none"; 
} 

closeWindowByEsc = function(e) { 
    if (!e) e = window.event; 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == '27') { 
    closeWindow(); 
    } 
} 

あなたはこれを解決するために2つのことを行うことができます。

addEventListener()のインスタンス化の下に移動します。

var closeSave = document.getElementById("closeSave"); 

// When the user clicks on <span> (x), close the modal 
var closeWindow = function() { 
    saveModal.style.display = "none"; 
    loadModal.style.display = "none"; 
} 

var closeWindowByEsc = function(e) { 
    if (!e) e = window.event; 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == '27') { 
    closeWindow(); 
    } 
} 

closeSave.addEventListener("click", closeWindow); 
closeSave.addEventListener("keypress", closeWindowByEsc); 

しますか、関数式ではなく、スコープの先頭にインスタンス化を呼び出すfunction文を使用できます。

var closeSave = document.getElementById("closeSave"); 

closeSave.addEventListener("click", closeWindow); 
closeSave.addEventListener("keypress", closeWindowByEsc); 

// When the user clicks on <span> (x), close the modal 
function closeWindow() { 
    saveModal.style.display = "none"; 
    loadModal.style.display = "none"; 
} 

function closeWindowByEsc(e) { 
    if (!e) e = window.event; 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == '27') { 
    closeWindow(); 
    } 
}