在jQueryUI的菜单项捕捉的焦点与听众比点击收听

我定义的ID leftmenu并在其列表元素jQueryUI的菜单更广泛的，我已经定义了一个函数上点击一个项目，具体如下：在jQueryUI的菜单项捕捉的焦点与听众比点击收听

$('#leftmenu>li').click(function() { 
    var clickedId = this.id; 
    $.ajax({ 
     type: "POST", 
     cache: false, 
     url: "/Session/Index/", 
     success: function (result) { 
      if (result.length > 0) 
      { 

       performListItemAction(clickedId); 
      } 
      else 
      { 

       window.location.href = '/Home/Index/' 
      } 
     } 
    }); 
});

这工作正常，但现在我想改变它，以便在菜单项上代替click，我想以更一般的方式捕获焦点和对该项目的选择，例如使用键盘。目前，我可以使用键盘上的向上和向下键浏览菜单，但内部代码不会被调用。我知道这是因为它只能在click上发生，但是当我尝试activate和focus代替click时，同样的事情发生了。

我怎样才能以更一般的方式来执行与click相同的行为，捕获菜单项的选择和输入？

谢谢。

来源

2016-08-08 ITWorker

你尝试添加一个事件'的keydown（）'和检查，看看是否被按下回车键.. –

@Pamblam我只是想'（'＃leftmenu> li'）。keydown（function（e）{ if（e.keyCode == 13）{ alert（'you enter enter^_ ^'）; } ...和它没有工作 – ITWorker

使用'$（document）.on（“keydown”，functi on（）{}）'并检查'document.activeelement'以查看它是否是其中一个菜单项 –

这应该在select事件中完成。通过这种方式，它可以捕获来自专注键盘操作的click或select。

例子：https://jsfiddle.net/Twisty/v671x6ns/

jQuery的

$(function() { 
    $('#leftmenu').menu({ 
    select: function(e, ui) { 
     var selectId = ui.item.attr("id"); 
     $.ajax({ 
     type: "POST", 
     cache: false, 
     url: "/Session/Index/", 
     success: function(result) { 
      if (result.length > 0) { 
      performListItemAction(selectId); 
      } else { 
      window.location.href = '/Home/Index/' 
      } 
     } 
     }); 
     console.log(e.type + " event, ID: " + selectId); 
    } 
    }); 
});

来源

2016-08-08 19:44:53 Twisty

这几乎可以100％工作。当我在已经选择的菜单项上按回车时，它会得到一个错误'无法获取属性'是'未定义或空引用'，但否则它运行良好。 – ITWorker

这很奇怪。不要认为我的代码中的任何内容都是这样做的。你用于菜单的其他选项有哪些？此代码还有哪些其他脚本正在运行？ – Twisty

'select'是我正在使用的唯一选项。我正在运行一个脚本'performListItemAction'，其中包括将所选菜单项的背景颜色更改为特定颜色。此外，这个问题不会发生在鼠标点击已经选择的项目上，只有键盘输入。 – ITWorker

在jQueryUI的菜单项捕捉的焦点与听众比点击收听

回答

相关问题