javascript - 仅覆盖箭头键滚动事件

Question

所以我正在创建一个自定义滚动框，因为标准的 html <select> 框并没有切割它（我需要显示两列，并且找不到如何使用 <select> 来执行此操作）。无论如何，我有一个可滚动的表格，它的工作方式正是我想要的。除了向上和向下箭头键触发整体滚动，而不是选择表中的前面或后面的元素。

html<select>上下适当绑定 http://jsfiddle.net/a5YJK/

我的自定义选择没有适当的上下 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
    }
}); ​

演示

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 的值更改为该行，等等

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