javascript - 在焦点 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/