jquery-ui - 禁用使用箭头键导航

Question

jQuery UI Tabs 有这个“功能”，如果我按下上/左或下/右键箭头，它会切换选项卡并加载该选项卡。

通常对于水平选项卡，用户更熟悉让向上和向下键滚动页面而不是移动选项卡。是否可以仅禁用向上和向下键的选项卡导航？

更新

根据康斯坦丁的建议，我尝试了以下代码。当我在单击锚选项卡后立即单击向上或向下键时，它会阻止事件。如果我像左/右键一样按另一个键，然后再次按上/下键。它注册了事件，但似乎并没有停止传播。该事件是否可以从另一个元素触发？这是我的代码：

   $('#tabs').keydown(function (event) {
        console.log("in tabs");
        if (event.keyCode == 40 || event.keyCode == 38) {
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
    });
    $('.ui-tabs-anchor').keydown(function (event) {
      console.log("in ui tabs anchor");
        if (event.keyCode == 40 || event.keyCode == 38) {
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
    });

    $('.ui-tabs-nav').keydown(function (event) {
      console.log("in ui tabs nav");
        if (event.keyCode == 40 || event.keyCode == 38) {
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
    });

Answer 1

是的，您可以处理该keydown事件并阻止它。它附加到 ui-tabs 锚点：

$('.ui-tabs-anchor').keydown(function (event) {
    return false;
});

Answer 2

在您的 jQuery-UI 文件中搜索以下代码并注释掉case $.ui.keyCode.DOWN:并case $.ui.keyCode.UP:

几乎你会从源头删除不需要的功能。

_tabKeydown: function( event ) {
        var focusedTab = $( this.document[0].activeElement ).closest( "li" ),
            selectedIndex = this.tabs.index( focusedTab ),
            goingForward = true;

        if ( this._handlePageNav( event ) ) {
            return;
        }

        switch ( event.keyCode ) {
            case $.ui.keyCode.RIGHT:
//IMPORTANT BIT case $.ui.keyCode.DOWN: 
                selectedIndex++;
                break;
//IMPORTANT BIT case $.ui.keyCode.UP:
            case $.ui.keyCode.LEFT:
                goingForward = false;
                selectedIndex--;
                break;
            case $.ui.keyCode.END:
                selectedIndex = this.anchors.length - 1;
                break;
            case $.ui.keyCode.HOME:
                selectedIndex = 0;
                break;
            case $.ui.keyCode.SPACE:
                // Activate only, no collapsing
                event.preventDefault();
                clearTimeout( this.activating );
                this._activate( selectedIndex );
                return;
            case $.ui.keyCode.ENTER:
                // Toggle (cancel delayed activation, allow collapsing)
                event.preventDefault();
                clearTimeout( this.activating );
                // Determine if we should collapse or activate
                this._activate( selectedIndex === this.options.active ? false : selectedIndex );
                return;
            default:
                return;
        }

Answer 3

只好自己做这件事。这对我有用：

$.widget("ui.tabs", $.ui.tabs, {
    _tabKeydown: function (event) {
        if (event.keyCode !== 38 && event.keyCode !== 40) {
            this._super(event);
        }
    }
});