javascript - 阻止 jQuery UI 菜单焦点

Question

如何防止 jQuery UI 菜单在单击某个项目时聚焦在菜单上。

我有一个选择菜单，当单击某个项目时，它会立即应用一个操作，然后菜单关闭。

因为 jQuery UI 在点击时触发焦点事件(http://code.jquery.com/ui/1.9.2/jquery-ui.js 的第 10956 行)，所以它在 Chrome 中丢失了选择(Firefox 似乎可以工作)。

...
} else if ( !this.element.is( ":focus" ) ) {
    // Redirect focus to the menu
    this.element.trigger( "focus", [ true ] ); // <----- this line
    ...
}
...

Answer 1

您可以采取的一种方法是使用您需要实现的特定方法/属性的自定义值来扩展 jquery.ui.menu 原型(prototype)。您可以创建一个新的小部件，使用 $.extend 在 jquery 中执行此操作。下面是扩展菜单小部件以使其使用表单输入的一个很好的示例(由 Kris Borchers 创作):

1. 演示页面在这里: http://kborchers.github.com/jquery-ui-extensions/menu/inputmenu.html

2. 脚本是这样定义的；

   //这是核心jquery ui库<脚本src =“http://code.jquery.com/ui/jquery-ui-git.js”> //这是扩展默认菜单小部件的自定义输入菜单小部件<脚本类型=“text/javascript”src=“jquery.ui.menu.inputmenu.js”>

3.评估此模式以扩展默认菜单小部件:

    /*
 * jQuery UI Input Menu Extension
 *
 * Copyright 2010, Kris Borchers
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/kborchers/jquery-ui-extensions
 */
(function( $ ) {

**var proto = $.ui.menu.prototype,
    originalRefresh = proto.refresh;

$.extend( proto, {**
    refresh: function() {
        originalRefresh.call( this );
        var that = this;
......
...
..
.

请在此处查看 github 源代码: https://github.com/kborchers/jquery-ui-extensions/blob/master/menu/jquery.ui.menu.inputmenu.js

如果您遵循此模式，您可以自定义任何小部件来满足您的需求。

希望这有帮助。

克里斯