1

单击项目时，如何防止 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
    ...
}
...
4

2 回答 2

1

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

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

  2. 脚本是这样定义的；

    //这是核心jquery ui库 < script src="http://code.jquery.com/ui/jquery-ui-git.js" ></script > //这是扩展的自定义输入菜单小部件默认菜单小部件 < script type="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

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

希望这可以帮助。

克里斯

于 2013-01-08T00:27:39.963 回答
0

我的快速修复解决方案是setTimeout0 并做焦点。原来 setTimeout 触发菜单将焦点返回到自身，所以如果你在 setTimout 之前聚焦，它将重新聚焦到菜单；

setTimeout(function(){
    $('#input-id').focus();
},0);

另一个快速解决方法是在任何地方以编程方式单击，这会取消菜单的焦点回到自身。

    $(document).click();
or
    $('#input-id').click();
于 2013-10-03T04:34:03.980 回答