javascript - 在 jquery、Chrome 和 IE 中使用 UP/DOWN 键时停止元素滚动？

Question

我有以下 JavaScript 代码，可以使用向上或向下键导航到下一个/上一个元素:

$(function(){
    var $p = $(".test p");

    $(document).on("keydown", function(e) {
        var $elementToBeSelected = $p.filter(function() { return $(this).hasClass("active"); }).first();
        if(!$elementToBeSelected.length){
            $elementToBeSelected = $p.first();
        }

        $p.removeClass("active");

        // if is down
       if(e.which ===  40){
           if($elementToBeSelected.next().length){
              $elementToBeSelected = $elementToBeSelected.next();   
           }
       } else {
           if($elementToBeSelected.prev().length){
              $elementToBeSelected = $elementToBeSelected.prev();   
           }          
       }

        $elementToBeSelected.addClass("active");
        $(".test").scrollTo($elementToBeSelected, 200);
    });
});

和 HTML 部分:

<div class="test">
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
    <p>asdasdasdada</p>
</div>
<div>
    <p>dasdasdasd</p>
</div>

或者更好，请参阅:http://jsfiddle.net/4u81tgmd/

在 Firefox 中，当单击容器(有段落)内部并向上/向下导航时，看起来不错。

在 Chrome 中，滚动条会出现一些闪烁。

当您单击带有段落的 div 内部并尝试按向上/向下键时，就会发生这种情况，浏览器会根据您按下的键自动移动您。

如何预防？如何仅使用您单击该容器的 scrollTo 事件在所有浏览器中工作？

Answer 1

使用 e.preventDefault()

MDN Refenrence :

Event.preventDefault() Cancels the event if it is cancelable, without stopping further propagation of the event.

working example

$(function(){
    var $p = $(".test p");

    $(document).on("keydown", function(e) {
        e.preventDefault()

        var $elementToBeSelected = $p.filter(function() { return $(this).hasClass("active"); }).first();
        if(!$elementToBeSelected.length){
            $elementToBeSelected = $p.first();
        }

        $p.removeClass("active");

        // if is down
       if(e.which ===  40){
           if($elementToBeSelected.next().length){
              $elementToBeSelected = $elementToBeSelected.next();   
           }
       } else {
           if($elementToBeSelected.prev().length){
              $elementToBeSelected = $elementToBeSelected.prev();   
           }          
       }

        $elementToBeSelected.addClass("active");
        $(".test").scrollTo($elementToBeSelected, 200);
    });
});