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()但没有它错误？

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

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