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

因此，基本上我需要做的是检测空格键的keydown事件，并因此在我的JavaScript文件中执行基于它的一些逻辑。在单个keydown上触发不需要的多个KeyDown事件

所以，你可以看到我的HTML，有一个按钮“撰写”点击哪个消息容器显示。

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

所以我写了收件人容器的on-click函数和空格键的keydown函数。

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

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

因此，如果我再次关闭并重新打开该框并再次单击，它将在空格键的每个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 = ['[email protected]'] 

$(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', ''); 
    }); 
});

任何帮助将不胜感激。

来源

2016-07-22 Ankush Raghuvanshi

每次单击＃收件人容器时，.keydown（）都会向文档添加一个额外的事件处理程序，而不删除现有的事件处理程序。这里最简单的解决方案是在您点击＃关闭按钮时删除处理程序。解除绑定事件可以使用.off（）完成。

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

来源

2016-07-22 13:33:44 Bert

Thanks @Bert。有效 –

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

回答

相关问题