将焦点集中在jQueryUI菜单项上，该菜单项具有比单击侦听器更宽的侦听器

Catching focus on a jQueryUI menu item with a listener broader than a click listener

本文关键字：菜单项 侦听器 单击 集中 焦点 jQueryUI      更新时间：2023-09-26

我定义了一个id为leftmenu的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相同的行为，以捕获菜单项的选择和进入?

谢谢。

这应该在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);
    }
  });
});
相关文章：