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;
        }
    }

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

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之前每次都执行清除操作。

clearTimeout不适用于addEventListener

1 个答案: