keyup eventListener 和文本输入字段答案

【问题标题】：keyup eventListener and text input fieldkeyup eventListener 和文本输入字段
【发布时间】：2019-08-06 20:13:34
【问题描述】：

我在他们的keyup 上有一个eventListener 事件，用于整个文档执行功能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">

【问题讨论】：

标签： javascript user-input dom-events keyboard-events

【解决方案1】：

您可以获得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>

【讨论】：

【解决方案2】：

试试

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

【讨论】：