Question

我在整个文件的键f的eventListener事件中有一个keyup事件，以使整个文档执行功能foo()。

一切正常，直到我必须编辑文本字段。特别是，当我键入键f时，将执行函数foo()，当我的目的是在文本字段中键入内容时，这是不希望的。

无论如何，我是否可以绕过此eventListener，以便可以在文本字段中正常键入内容？

这是我的代码：

document.addEventListener("keyup", function(event){
event.preventDefault();
    if (event.keyCode === 70){
        foo();
    }
});


function foo(){
    console.log("Howdy world");
}

<input type="text">

Answer 1

尝试

<input type="text" 
    onkeydown="event.stopPropagation()" 
    onkeyup="event.stopPropagation()" 
    onkeypress="event.stopPropagation()">

那么event.stopPropagation()在这里做什么？

event.stopPropagation（）方法停止将事件冒泡到父元素，从而阻止执行任何事件处理程序。

在这种情况下，当您键入键F时，它将首先触发input元素本身的事件侦听器，然后将事件传播到其父元素。现在，由于document也是input的祖先，因此也会触发其事件侦听器。

为防止这种情况，请在每次与输入交互时使用event.stopPropagation()。在这种情况下，事件为onkeydown，onkeyup和onkeypressed。

Answer 2

例如，您可以获得tagName中的activeElement并且不执行函数，例如：

input

keyup eventListener和文本输入字段

2 个答案: