防止 jQuery UI 菜单焦点答案

【问题标题】：Prevent jQuery UI menu focus防止 jQuery UI 菜单焦点
【发布时间】：2013-10-03 12:34:03
【问题描述】：

如何防止 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
    ...
}
...

【问题讨论】：

您的 html 和代码仍然会有所帮助，您的菜单代码以及您的其他代码
我没试过，但是 $( ".selector" ).menu({ focus: function() { return false; } });
无论如何，你可以为这个问题制作一个 jsFiddle，这会有所帮助。 jsfiddle.net

标签： javascript jquery jquery-ui selection

【解决方案1】：

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

演示页面在这里： http://kborchers.github.com/jquery-ui-extensions/menu/inputmenu.html
脚本是这样定义的；

//这是核心的jquery ui库 //这是扩展默认菜单小部件的自定义输入菜单小部件

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

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

希望这会有所帮助。

克里斯

【讨论】：

【解决方案2】：

我的快速修复解决方案是setTimeout 0 并集中注意力。原来 setTimeout 触发菜单将焦点返回到自身，所以如果你在 setTimout 之前聚焦，它会聚焦回菜单；

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

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

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

【讨论】：