event.preventDefault（）导致：悬停伪类以坚持

Question

我正在尝试实现一个文档导航，类似于Bootstrap站点上的文档导航。 我已经完成了它的工作，但它有一个方面是困扰我。

就像在Bootstrap上一样，我使用的是affix.js和scrollSpy.js的组合，这是有效的。 请参阅以下JSFiddle 。

        $('#doc_nav').on( "click", "a", function( e ){
//            e.preventDefault();
            var target = this.hash;
            var $target = $(target);
            var offset = $target.offset().top;
            console.log(offset);
            offset = offset - 100;
            console.log(offset);

            $('html, body').scrollTop( offset );


        });

e.preventDefault（）被注释掉后，导航菜单的行为就像预期的那样。 向下滚动窗口会导致显示的div在菜单上突出显示。 单击菜单列表中的项目，直接将您带到页面上的相应div，然后当您从页面上的该部分滚动时，菜单会相应更新。

在我的“真实”页面上，我有一个高度为100px的固定标题。 所以目前，当我点击菜单链接时，页面会跳转到所需的部分，并将其放在页面顶部，标题会略微遮盖它。 除非我使用e.preventDefault（），否则上面代码的scrollTop部分似乎不起作用。 如果您在小提琴中取消注释该行并再次运行它，请单击菜单上的“标题3”链接，您将看到它现在将页面中的标题3内容从顶部偏移100px。 完善。

但是，现在向上滚动页面向上。 您将看到“标题3”列表项仍处于其：悬停状态，即使鼠标不在其附近也是如此。 就像e.preventDefault（）阻止浏览器检测到鼠标不再悬停在该项上一样。

鼠标右键单击浏览器窗口外的任何位置，可以解决问题。

任何人都可以解释我在这里做错了什么吗？ 如何防止锚定点击的默认行为，以便我可以控制页面滚动放置，而不会在过程中停止正确的CSS绘制？

问题出现是因为我使用e.preventDefault（）阻止浏览器默认行为，因为我想控制滚动到锚定元素。

我在Firefox和IE10中测试了这个。

Answer 1

问题不在于:hover状态，而是:focus状态。

当您单击链接时，该链接将获得焦点，因此您应用:focus样式（与代码中的:hover样式相同）。 通过阻止默认行为，该链接保持活动状态并且不会失去焦点。

一个快速的解决方案是使用： $(this).blur()来对元素进行非聚焦/模糊。

在你的代码中它看起来像这样：

    $('#doc_nav').on( "click", "a", function( e ){
        e.preventDefault();
        var target = this.hash;
        var $target = $(target);
        var offset = $target.offset().top;
        console.log(offset);
        offset = offset - 100;
        console.log(offset);
        $(this).blur();
        $('html, body').scrollTop( offset );
    });

你可以在这里看到一个演示： https ： //jsfiddle.net/z32rpe3b/30/

---

为什么它与e.preventDefault()一起运行e.preventDefault()但没有它呢？

这个问题的答案与执行顺序有关。 onclick事件发生在浏览器中发生href重定向之前：

• 如果没有e.preventDefault() ，则执行代码，并且浏览器正确滚动到目标offset - 100位置（在onclick ），但随后它执行链接href并滚动到目标offset 。 它发生得如此之快，以至于它似乎直接进入了目标位置。
• 使用e.preventDefault() ，代码被执行（滚动到offset - 100 ），浏览器不执行href动作（因此它保持offset - 100 ）。