在單個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事件

回答

相關問題