jquery-ui – 禁用箭头键导航

jQuery UI选项卡具有此“功能”,如果我按向上/向左或向下/向右键箭头,它会切换选项卡并加载该选项卡.

通常对于水平制表符,用户更熟悉使用向上和向下键滚动页面与移动制表符.是否可以仅为向上和向下键禁用选项卡导航？

UPDATE

根据康斯坦丁的建议,我尝试了以下代码.单击锚点选项卡后,单击向上或向下键时,它会阻止事件.如果我按下左/右键的另一个键,然后再次按下向上/向下键.它注册事件,但似乎没有停止传播.该事件可以从另一个元素开火吗？这是我的代码：

$('#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;
        };
    });

解决方法

在jQuery-UI文件中搜索以下代码并注释掉$.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;
        }

原文地址：https://www.jb51.cc/jquery/241561.html