键升事件侦听器和文本输入字段

我对他们有一个eventListener，keyup整个文档的键f的事件来执行功能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">

您可以获取activeElement的tagName，如果函数等于input则不执行函数，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
    <input type="text" name="" id="">

    <script>
        document.addEventListener("keyup", function (event) {
            event.preventDefault();
            if (event.keyCode === 70 && document.activeElement.tagName !== 'INPUT') {
                foo();
            }
        });
        function foo() {
            console.log("Howdy world");
        }
    </script>
</body>
</html>

尝试

<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。

相关内容

最新更新

热门标签：