jQuery：如果 href 仅包含 #，则防止在 <a> 标签上跳转

Question

如果 a 标签在 href 中设置了哈希值，我想防止它在点击时跳转到顶部。所以如果用户点击：

<a href="#">Hello</a>

什么都不应该发生。

但是：

<a href="#target">Lorem</a>

应该正常工作。

Answer 1

使用"javascript:;"或"javascript.void(0)":

<a href="javascript:;">Hello</a>
<a href="javascript.void(0)">Hello</a>

Answer 2

在 jQuery 中，您可以轻松做到这一点

$('a[href="#"]').on('click', function(e) {
    e.preventDefault();
});

防止对所有仅使用哈希作为 href 的锚点执行默认操作将消除这些锚点滚动到页面顶部的问题

在普通的 javascript 假设支持 querySelector 和 addEventListener，它看起来像

var anchors = document.querySelectorAll('a[href="#"]');

for ( var i=anchors.length; i--; ) {
    anchors[i].addEventListener('click', fn, false);
}

function fn(event) {
    event.preventDefault();
}

另一种选择是委托事件处理程序，如评论中所述

$(document).on('click', 'a[href="#"]', function(e) {
    e.preventDefault();
});

直接使用 DOM 看起来像

document.addEventListener('click', function(event) {
    var clicked = event.target;

    while ( clicked ) {
        if (clicked.nodeName.toUpperCase() === 'A' &&
            clicked.getAttribute('href') === '#') {
            event.preventDefault();
            break;
        }
        clicked = clicked.parentNode;
    }
});

显而易见，委托的处理程序将捕获所有点击并进行一些检查以查看目标是锚点还是在锚点内，href 仅为 #.
我不认为它会更有效率，除非 DOM.

中有很多锚点

jQuery：如果 href 仅包含 #，则防止在 <a> 标签上跳转

jQuery: Prevent jump on <a> tag if href only contains #

anchor

jquery