使用空格键切换禁用 jQuery UI Accordion答案

【问题标题】：Disabling jQuery UI Accordion with space bar toggling使用空格键切换禁用 jQuery UI Accordion
【发布时间】：2014-11-07 22:26:12
【问题描述】：

我在 jQuery UI 手风琴中看到您可以使用空格键来切换活动标题。如何禁用此功能？我不希望用户使用键盘与手风琴交互。

【问题讨论】：

标签： jquery-ui jquery-plugins jquery-ui-accordion

【解决方案1】：

如果您根本不需要“_keydown”功能，我想您可以将其删除。

delete($.ui.accordion.prototype._keydown);

如果您想更改或覆盖“_keydown”函数的功能并且不想将其破解到您可以做的原始文件中：

$.ui.accordion.prototype._keydown = function( event ) {
    // your new code for the "_keydown" function
};

希望对你有帮助

【讨论】：

覆盖效果很好。您不想完全删除 keydown，因为 uicode 仍然会触发并且会引发错误。只需“返回”；从_keydown函数绕过

【解决方案2】：

我开发了一个仅启用空格键的答案，但它可以扩展为您想要覆盖的其他按键事件。

/*
 * Detect spacebar and return immediately, otherwise call standard behaviour
 * The 'solution' of deleting the event handler caused other errors
 * http://stackoverflow.com/a/7008791
*/
$.ui.accordion.prototype._originalKeyDown = $.ui.accordion.prototype._keydown;
$.ui.accordion.prototype._keydown = function( event ) {
    var keyCode = $.ui.keyCode;

    if (event.keyCode == keyCode.SPACE) {
        return;
    }
    // call the original method
    this._originalKeyDown(event);
};

【讨论】：

【解决方案3】：

我找到了一个可行的解决方案，但我不确定后果。

在 jquery.ui.accordion.js 中：

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

注意从太空“跌倒”进入。我添加了一个休息：

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
            break;
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

您仍然会在按“enter”时获得关闭行为，因此如有必要，您也可以随意中断。我认为问题出在

this._clickHandler( { target: event.target }, event.target );

但我在第一次阅读时没有看到它。这个编辑对我有用。

希望有帮助

【讨论】：

我正在处理一个类似的问题（手风琴标题的内联编辑 - 空格键的行为很奇怪） - 我发现在最近版本的 JqueryUI 中，单击处理程序方法已被删除并替换为：this ._eventHandler(event);