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原型。您可以创建一个使用$ .extend在jquery中执行此操作的新窗口小部件。这是扩展菜单小部件以使其使用表单输入的一个很好的示例（由Kris Borchers编写）：

演示页面在这里： http://kborchers.github.com/jquery-ui-extensions/menu/inputmenu.html
脚本定义如下;

//这是核心jquery ui库＆LT; script src =“http://code.jquery.com/ui/jquery-ui-git.js”＆gt;＆lt; / script＆gt; //这是扩展默认菜单小部件的自定义输入菜单小部件＆LT; script type =“text / javascript”src =“jquery.ui.menu.inputmenu.js”＆gt;

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

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

希望这有帮助。

克里斯

Answer 2

我的快速修复解决方案是setTimeout 0并重点关注。原来，setTimeout触发菜单将焦点重新调回自身，所以如果你在setTimout之前聚焦，它会聚焦回菜单;

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

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

    $(document).click();
or
    $('#input-id').click();

防止jQuery UI菜单焦点

2 个答案: