keyup eventListener和文本輸入字段

Question

我在它們的鍵f的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">

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

您可以獲取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>

keyup eventListener和文本輸入字段

問題描述

2 個解決方案

解決方案1
0 2019-08-06 20:21:14

解決方案2
0 2019-08-06 20:25:51

keyup eventListener和文本輸入字段

問題描述

2 個解決方案

解決方案1 0 2019-08-06 20:21:14

解決方案2 0 2019-08-06 20:25:51

解決方案1
0 2019-08-06 20:21:14

解決方案2
0 2019-08-06 20:25:51