javascript - 为什么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)多次发生，然后看起来它正在跳过项目。我不明白为什么要这样做。有没有一种方法可以在文本字段成为“焦点”之后但在 keyDown 发生之前清除事件？还是我写错了什么？

Answer 1

因为每次元素获得焦点时，都会向其添加一个事件 keydown。

尝试将 $j('#item').keydown(function(e) { ... }); 以及您的函数 navigate 放在焦点事件之外。