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置于焦点事件之外。

为什么keydown事件会触发多次

1 个答案: