clearTimeout不適用於addEventListener

Question

包裝器是父節點，並且有一個輸入元素作為子節點，當輸入失去焦點時，focusout事件用於執行一些代碼，當按下Esc或Enter時，onkeydown事件用於執行一些代碼。 按下Esc鍵時，輸入也將失去焦點，因此也將調用focusout事件。 為了解決此問題，我在focusout中使用了settimeout方法，並在onkeydown事件中將其清除，當按Esc或Enter時應該不會調用focusout事件，但是我的代碼似乎不起作用，有人可以幫忙嗎？ 提前致謝！ HTML結構可能像這樣：

<div>
<input type="text">
</div>

Wrapper.addEventListener('focusout', function(e) {
    var e = e || window.event;
    var target = e.target || e.scrElement;
    timer = setTimeout(function() {
       some code
    }, 120);

});

Wrapper.onkeydown = function(e) {
    var e = e || window.event;
    var target = e.target || e.scrElement;
    clearTimeout(timer);
    if (target.tagName.toLowerCase() === 'input') {
        if (e.keyCode === 27 || e.keyCode === 13) {
            some code
        }
    }
} 

我也嘗試過這種方式，直接在輸入上添加事件，但stil不起作用

inp.onblur = function() {
        timer = setTimeout(function() {
            some code 
        }, 120);        
    } 

inp.onkeydown = function(e) {
        clearTimeout(timer);
        var e = e || window.event;
        var target = e.target || e.srcElement;
        console.log(target.parentNode);
        switch (e.keyCode) {
            case 27:
                some code
                break;
            case 13:
                some code
                break;
            default:
                break;
        }
    }

但在同一文件中，clearTimeout在onclick事件中可以正常工作，代碼如下所示：

cancelBtn.onclick = function() {
        clearTimeout(timer);
        somecode;
    }

onclick和onkeydown函數結構對我來說看起來完全一樣，但是為什么它僅在onclick事件中起作用？ 這真的讓我感到困惑，請幫忙。

Answer 1

我認為問題出在您的代碼上。

如果運行序列：

timer = setTimeout(function() {
       console.log(1);
    }, 120);
timer = setTimeout(function() {
       console.log(2);
    }, 120);
clearTimeout(timer);
clearTimeout(timer);

setTimeout的第一個代碼將執行一次。
第一個命令設置新的計時器。
第二條命令添加新的計時器並覆蓋計時器ID。
第一個clearTimeout清除第二個計時器。
第二個clearTimeout無法刪除第一個計時器，因為其值已消失。

我認為代碼中發生了什么。 要解決此問題，您需要在setTimeout之前每次都執行清除操作。