爲什麼keydown事件觸發不止一次

Question

我試圖在文本輸入字段下創建一個建議列表。目前我有這個列表的html的以下代碼。

<div id="assigned_user_wrap"> 
    <input type="text" name="item" id="item" value="" /> 
</div> 
<div id="suggestions"> 
    <ul> 
     <li id="1">Item 1</li> 
     <li id="2">Item 2</li> 
     <li id="3">Item 3</li> 
     <li id="4">Item 4</li> 
     <li id="5">Item 5</li> 
     <li id="6">Item 6</li> 
    </ul> 
</div> 

的JavaScript目前是這樣的：

$j('#item').focus(function() { 

// Register keypress events 
$j('#item').keydown(function(e) { 
    console.log(e.keyCode); 
    switch(e.keyCode) { 
    // User pressed "up" arrow 
    case 38: 
     e.preventDefault(); 
     navigate('up'); 
     console.log('up'); 
     break; 
    // User pressed "down" arrow 
    case 40: 
     e.preventDefault(); 
     navigate('down'); 
     console.log('down'); 
     break; 
    // User pressed "enter" 
    case 13: 
     e.preventDefault(); 
     if(item_name != '') {  
     $('#item').val(item_name);   
     console.log('item_name = ' + item_name); 
     } 
    break; 
    } 
}); 

function navigate(direction){ 
    if($(":visible","#suggestions").length > 0){ 
    var lis = $j("li", "#suggestions"); 
    if(direction == "down"){ 
    var start = lis.eq(0); 
    } else { 
    var start = lis.filter(":last"); 
    }  
    var active = $j("li.active:first", "#suggestions"); 
    if(active.length > 0){ 
     if(direction == "down"){ 
      start = active.next(); 
     } else { 
      start = active.prev(); 
     } 
    } 
    lis.removeClass("active"); 
    start.addClass("active"); 

    item_name = start.text(); 

    } 
} 

});//focus 

當我加載頁面，並把我的鼠標在文本輸入字段，並開始點擊向下箭頭每一個項目的高亮顯示爲預期。但是，只要我點擊輸入字段並單擊任意鍵，然後再次返回到輸入字段並嘗試瀏覽列表，它將跳過項目。正如你所看到的，我有幾個console.log來顯示發生了什麼。日誌表明，當我點擊向下或向上箭頭（一次）時，會觸發事件（keyDown）發生多次，然後顯示它正在跳過項目。我無法弄清楚它爲什麼這樣做。有什麼辦法可以在文本字段變爲「焦點」之後但在鍵盤出現之前清除事件？或者我寫錯了什麼？

Answer 1

因爲每次元素被聚焦，一個事件​​被添加到它。

嘗試把$j('#item').keydown(function(e) { ... });和您的功能navigate外部焦點事件。