Question

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

因此，您可以在我的HTML中看到，有一个按钮＆＃34;撰写＆＃34;点击显示消息容器的内容。

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

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

现在问题来了。当页面第一次加载时，它完全正常。我点击收件人框内部，一旦我点击空格键，＆＃34;空格键按下＆＃34;一次按下一个键就会在浏览器控制台上打印出来。

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

因此，如果我再次关闭并重新打开盒子并再次单击，它将打印＆＃34;空格键按下＆＃34;空格键的每个keydown都有三次。

那么与事件或其他东西的绑定和解除绑定有关吗？因为我已经经历过类似的链接，其中关键事件一次又一次地受到约束，但是可以真正弄清楚我想要点击＆＃34;关闭＆＃34;按钮。

这是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', '');
    }); 
});

任何帮助将不胜感激。

Answer 1

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

完成

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

在单个keydown上触发不需要的多个KeyDown事件

1 个答案: