Question

所以我正在创建一个自定义滚动框，因为标准的html＆lt;选择＆GT;框只是没有切割它（我需要显示两列，并且无法通过＆lt; select＆gt;找到如何执行此操作）。无论如何，我有一个可滚动的表正在工作只是我想要它。除了向上和向下箭头键之外，触发整体滚动而不是选择表格中的前一个或前一个元素。

html＆lt;选择＆gt;具有适当的上下绑定 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
    }
});

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（）函数来阻止事件冒泡。

仅覆盖arrowkey滚动事件

2 个答案: