在单个按键上触发了不需要的多个按键事件答案

【问题标题】：Unwanted Multiple KeyDown Events triggered on single keydown在单个按键上触发了不需要的多个按键事件
【发布时间】：2016-11-26 09:45:10
【问题描述】：

所以基本上我需要做的是检测空格键的按键事件，因此在我的 javascript 文件中执行一些基于它的逻辑。

正如您在我的 html 中看到的那样，点击后会显示一个“撰写”按钮，消息容器会显示出来。

现在我需要实现类似 Gmail 的功能，将收件人中的邮件 ID 转换为标签，但在我的情况下，只要按下空格键，有效的邮件 ID 就会转换为标签，即之前的字符串空格键将检查有效的电子邮件 ID。

所以我写了收件人容器的点击功能和空格键的按键功能。

现在问题来了。第一次加载页面时，它工作得非常好。我在收件人框中单击，一旦我按下空格键，“按下空格键”就会在浏览器控制台上打印一次，一键按下。

现在，如果我通过单击“关闭”按钮隐藏此消息容器 div，然后通过单击“撰写”按钮再次显示消息容器 div，然后当我单击收件人框时，它会触发两个空格键的 keydown 事件，即“按下空格键”将被打印两次。

因此，如果我再次关闭并重新打开该框并再次单击，它将为空格键的每个按键打印三次“按下空格键”。

那么它与事件的绑定和解除绑定有关还是其他？因为我经历过类似的链接，其中按键事件一次又一次地绑定，但真的可以弄清楚我想如何在单击“关闭”按钮时终止该事件。

这里是html：

<!DOCTYPE html>
<html>
<head>
    <title>ZMail</title>

    <link rel="stylesheet" type="text/css" href="css/fonts.css" />  
    <link rel="stylesheet" type="text/css" href="css/main.css" />  

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

</head>
<body>
    <div class="header">
        <h2>ZMail</h2>
    </div>
    <div class="body-container">
        <button type="button" class="compose-button" id="compose-button">Compose</button>
        <div class="message-container" id="message-container">
            <div class="compose-form-header">
                <p> New Message </p>
                <button type="button" class="close-button" id="close-button">x</button>
            </div>
            <form id="compose-form" method="POST" action="">
                <div class="recipient-container" id="recipient-container">
                    <div class="to-box" id="to-box">
                        <p>To</p>
                    </div>
                    <div class="input-elements-container" id="input-elements-container">
                        <input type="text" id="recipient-box" name="recipients" placeholder="Recipients">
                    </div>
                </div>
                <input type="text" id="subject-box" name="subject" placeholder="Subject">
                <textarea form="compose-form" id="message-text-box" name="message-text" ></textarea>
                <div class="send-button-container">
                    <button type="submit" class="send-mail-button" id="send-mail-button">Send</button>
                </div>
            </form>
        </div>
    </div>
</body>

这里是 JS

var contacts = ['ankush.rgv@gmail.com']

$(document).on('ready', function(){

    $("#message-container").hide();
    $("#to-box").hide();

    $("#compose-button").click(function (event) {
        if($("#message-container").is(':hidden')){
            $(function() {
                $("#recipient-box" ).autocomplete({
                   source: contacts
                });
            });
            $("#message-container").show();
         }
    });

    $("#close-button").click(function (event) {
        $("#message-container").hide();
        $("#to-box").hide();
        $("#recipient-box").val('');
        $("#subject-box").val('');
        $("#recipient-box").attr('placeholder', 'Recipients');
        $("#subject-box").attr('placeholder', 'Subject');
    });

    $("#recipient-container").click(function (event) {

        console.log("recipients clicked");
        $("#to-box").show();    

        $("#recipient-box").attr('placeholder', '');

        $(document).keydown(function(e) {
            if (e.keyCode == 32) {
                console.log("spacebar pressed!!");
             }
        });
    });

    $("#subject-box").click(function (event) {
        $(this).attr('placeholder', '');
    }); 
});

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

每次单击#recipient-container 时，.keydown() 都会向文档添加一个额外的事件处理程序，而不会删除现有的事件处理程序。这里最简单的解决方案是在单击#close-button 时删除处理程序。可以使用 .off() 来解除绑定事件。

$(document).off('keydown');

【讨论】：