仅重写箭头键滚动事件

Question

所以我创建了一个自定义滚动框，因为标准的html < select>框不能处理它(我需要显示两列，但是不知道如何使用< select>)。无论如何，我有一个可滚动的表格，它的工作方式正是我想要的。除了向上和向下箭头键触发整个滚动，而不是选择表中的前一个或前两个元素。

带有适当的向上和向下http://jsfiddle.net/a5YJK/绑定的html < select >

我的自定义选择没有适当的向上和向下http://jsfiddle.net/8zgxA/3/

当我跑的时候

$('#wrap *').scroll(function(e){}); 

我无法区分鼠标滚动和向上或向下箭头。我该如何区分？

Answer 1

只需检查滚动事件中不存在的e.keyCode或e.which即可。

$(window).on('keyup scroll', function(e){
    console.log(e.keyCode); //undefined for mouse scroll

    if(e.keyCode && e.keyCode == 40){
        //down arrow, scroll might occur, so prevent it or do whatever
    }
}); ​

DEMO

Answer 2

<table onfocus="focused(1)" onblur="focused(0)" onkeypress="selectnext(event)">
.
.
.
</table>

<script type="text/javascript">
var currentrow = 0;
var tablefocused;
function focused(a)
{
switch(a)
{
case 1:
tablefocused = 1;
break;
case 0:
tablefocused = 0;
break;
}
}
function selectnext(e)
e.stopPropagation();
{
if(tablefocused==1)
{
switch(e.keyCode)
{
case 38:
currentrow = currentrow-1;
this.childNodes[currentrow].style.backgroundColor = "blue";
$('tr').css('background', '');
break;
case 40:
currentrow = currentrow+1;
this.childNodes[currentrow].style.backgroundColor = "blue";
$('tr').css('background', '');
break;
}
}
}
</script>

我在这段代码中遗漏了一些细节，例如' currentrow‘不应该转到-1，单击行应该将currentrow的值更改为该行e.t.c。

哦，为了防止滚动，您可以使用stopPropagation()函数来防止事件冒泡。