为什么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 放在焦点事件之外。