单次按下时触发了不需要的多个KeyDown事件

Question

So basically what I need to do is detect a keydown event of spacebar and hence perform some logic based on it in my javascript file. 因此，基本上我需要做的是检测空格键的keydown事件，然后在我的javascript文件中基于它执行一些逻辑。

So as you can see in my html, that there is a button "compose" on clicking which the message-container is displayed. 因此，正如您在我的html中看到的那样，单击该按钮后会显示一个“组成”按钮，显示消息容器。

Now I need to implement Gmail like feature of converting the mail ids in recipients as tags but in my case a valid mail-id will be converted to a tag as soon as a space-bar is pressed, ie, the string before the space bar will be checked for valid email-id. 现在，我需要实现类似Gmail的功能，即将收件人中的邮件ID转换为标签，但是在我的情况下，只要按下空格键，即空格键之前的字符串，就会将有效的邮件ID转换为标签。将检查有效的电子邮件ID。

So i've written the on-click function of the recipient container and the keydown function for spacebar. 因此，我编写了收件人容器的单击功能和空格键的按下功能。

Now here comes the problem. 现在问题来了。 When the page is loaded for the first time, it works perfectly fine. 首次加载页面时，它可以正常工作。 I click inside the recipient box and as soon as i hit space bar, "spacebar pressed" gets printed on the browser console one time for one key down. 我在收件人框内单击，一旦按下空格键，“空格键按下”就会在浏览器控制台上打印一次，一键按下。

Now if I hide this message-container div by clicking the "close" button, and then again show the message-container div by clicking the "compose" button, and then when i click in the recipients box, it fires two keydown events for spacebar ie, "spacebar pressed" will be printed twice. 现在，如果我通过单击“关闭”按钮隐藏此消息容器div，然后通过单击“撰写”按钮再次显示消息容器div，然后当我在收件人框中单击时，它将触发两个keydown事件空格键，即“按下空格键”将被打印两次。

And consequently, if i again close and reopen the box and click again, it will print "spacebar pressed" three times for every keydown of spacebar. 因此，如果我再次关闭并重新打开该框并再次单击，它将为每次按下空格键打印“按空格键”三次。

So is it something related to binding and unbinding of events or something else? 那么这与事件的绑定和解绑定或其他相关吗？ Coz i have gone through similar links in which the key down event was getting binding again and again, but could really figure out how I would like kill the event on clicking of "close" button. 因为我已经经历了类似的链接，其中按键事件一次又一次地被绑定，但是我真的可以弄清楚我想如何通过单击“关闭”按钮来终止该事件。

Here is html: 这是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>

And here is the JS 这是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', '');
    }); 
});

Any help will be appreciated. 任何帮助将不胜感激。

Answer 1

Everytime you click on #recipient-container, .keydown() will add an extra event handler to the document, without removing the existing ones. 每次单击＃recipient-container时，.keydown（）都会向文档添加一个额外的事件处理程序，而不会删除现有的事件处理程序。 The easiest solution here would be to remove the handler when you click on #close-button. 最简单的解决方案是单击＃close-button时删除处理程序。 Unbinding events can be done with .off(). 解除绑定事件可以使用.off（）完成。

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

单次按下时触发了不需要的多个KeyDown事件

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-07-22 13:33:44

单次按下时触发了不需要的多个KeyDown事件

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-07-22 13:33:44

解决方案1
2 已采纳 2016-07-22 13:33:44