почему addEventListener запускает событие - PullRequest
Новая
       131

почему addEventListener запускает событие

0 голосов
/ 13 июля 2020

обработчик события щелчка addNode_button ожидает ввода, чтобы что-то сделать. Но я хочу остановить прослушиватель событий, нажав es c. Я сделал упрощенный пример, который показывает, что addEventListener при нажатии клавиши «нажимает» кнопку. Не могу понять почему. 

addNode_but.addEventListener('click',addNodeButClick);
function addNodeButClick(){
        let value = nodePt_inp.value;out1.value = new Date();
        let waitingValue = 'try to stop clock by escape,then input something to stop';
        function callMeAgain(){addNode_but.dispatchEvent(new Event('click'))};
        switch (value){
            case '': nodePt_inp.value = waitingValue;
            case waitingValue: setTimeout(callMeAgain,100);break;
            default:    out1.value = "only now I've stopped";
        }
}
document.addEventListener('keydown',escape);
function escape(evt){
    if (evt.key==='Escape'){
        addNode_but.removeEventListener('click',addNodeButClick);
        nodePt_inp.value = "";               
        addNode_but.addEventListener('click',addNodeButClick);
        }
}
<input style='display:block;width:60ch' type="text" id="nodePt_inp" name='pt'>
<button id='addNode_but' class='button'>clickMe and try to stop by esc</button>
<output id='out1'>output</output>

1 Ответ

2 голосов
/ 13 июля 2020

Чтобы остановить вызов setTimeout, вы должны сохранить ссылку на результат этого вызова и позвонить clearTimeout

addNode_but.addEventListener('click',addNodeButClick);
var timerId = null;
function addNodeButClick(){
        let value = nodePt_inp.value;out1.value = new Date();
        let waitingValue = 'try to stop clock by escape,then input something to stop';
        function callMeAgain(){addNode_but.dispatchEvent(new Event('click'))};
        nodePt_inp.value = waitingValue;
        timerId = setTimeout(callMeAgain,100);
}
document.addEventListener('keydown',escape);
function escape(evt){
    if (evt.key==='Escape'){
        clearTimeout(timerId);
    }
}
<input style='display:block;width:60ch' type="text" id="nodePt_inp" name='pt'>
<button id='addNode_but' class='button'>clickMe and try to stop by esc</button>
<output id='out1'>output</output>
...