остановить распространение событий в фокусе JQuery

Question

Я тестирую навигацию с помощью клавиатуры, но когда я перемещаюсь по раскрывающемуся списку, индекс сам меняется, я имею в виду, что если это значение равно A, когда мы фокусируемся на нем через клавиатуру, это значение станет B.

Я использовал это, чтобы остановить это, но все равно не повезло.

 e.preventDefault();
e.cancelBubble = true;
return false;

Вот весь скрипт навигации.

<script type="text/javascript">
var _parent;
var _selectedIndex = 0;
$(document).ready(function() {

    $("input.flat,select.flat").click(function(){

        $("input.flat,select.flat").each(function(){
            $(this).removeClass('active_ele');
        });

        $(this).addClass('active_ele');

    });


    $("select.flat").bind('focus',function (e) {

        //e.preventDefault();
        //e.focus();
        //return false;
        //e.cancelBubble = true;
        //return false;
    });

    $("input.flat,select.flat").bind('keydown',function (e) {

        switch(e.keyCode)
        {
            case 37:
                /////Right
                _parent = $(this).parent().prev();

                if(_parent.hasClass('combo'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("select.flat");
                    nNode.addClass('active_ele');
                    _selectedIndex = nNode[0].selectedIndex;
                    nNode[0].focus();
                    nNode[0].selectedIndex = _selectedIndex;

                }
                else if(_parent.hasClass('inputBox'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("input.flat");
                    nNode.addClass('active_ele');
                    nNode.focus();

                }   


            break;

            case 39:
            //////////Left

                _parent = $(this).parent().next();

                if(_parent.hasClass('combo'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("select.flat");
                    nNode.addClass('active_ele');
                    _selectedIndex = nNode[0].selectedIndex;
                    nNode[0].focus();
                    nNode[0].selectedIndex = _selectedIndex;
                }
                else if(_parent.hasClass('inputBox'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("input.flat");
                    nNode.addClass('active_ele');
                    nNode.focus();
                }   


                break;

            case 40:
                /////Down
                _nNode = $(this).parent();
                _index = _nNode.attr('data');

                _index =  parseInt(_index) + 1
                ///td
                _nNode = _nNode.parent()
                    .next()
                    .children(0)[_index];

                _nNode = $(_nNode); 

                if(_nNode[0])
                {
                    if(_nNode.hasClass('combo'))
                    {   

                        _nNode = _nNode.children("select.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _selectedIndex = _nNode[0].selectedIndex;
                        _nNode[0].focus();
                        _nNode[0].selectedIndex = _selectedIndex;

                    }
                    else if(_nNode.hasClass('inputBox'))
                    {
                        _nNode = _nNode.children("input.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _nNode.focus();
                    }
                }


                break;

            case 38:
            /////Up
                    _nNode = $(this).parent();
                _index = _nNode.attr('data');
                    _index =  parseInt(_index) + 1
                ///td
                _nNode = _nNode.parent()
                    .prev()
                    .children(0)[_index];
                _nNode = $(_nNode); 
                if(_nNode[0])
                {
                    if(_nNode.hasClass('combo'))
                    {   

                        _nNode = _nNode.children("select.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _selectedIndex = _nNode[0].selectedIndex;
                        _nNode[0].focus();
                        _nNode[0].selectedIndex = _selectedIndex;
                    }
                    else if(_nNode.hasClass('inputBox'))
                    {
                        _nNode = _nNode.children("input.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _nNode.focus();
                    }
                }
                break;

            case 46:
                $(this).val("");
        }

        e.preventDefault();
        e.cancelBubble = true;
        return false;


    });
});

</script>

ссылка на файл, плз, предложите решение, как остановить изменение этого индекса. http://69.175.126.242/~develope/younussal/test/test.htm

Спасибо

Answer 1

Попробуйте e.stopPropagation();

Это в документации JQuery: http://api.jquery.com/event.stopPropagation/

Answer 2

Используйте клавишу «TAB» для перемещения между элементами управления вместо клавиши «стрелка» (стандартная навигация с клавиатуры).

Не перехватывайте клавиши со стрелками, они нужны для изменения значений в элементах управления (выбранные элементы в полях выбора).

Браузер и ОС уже должны выполнить большую часть работы за вас.

Answer 3

Я столкнулся с такой же проблемой:

Взлом, который я использовал, был размыть его

node.addEventListener('focus',function(){this.blur();},false);