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

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

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

什么都不应该发生。

然而:

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

应该像正常行为一样工作。

最佳答案

在 jQuery 中，你可以很容易地做到这一点

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

仅使用哈希作为 href 阻止对所有 anchor 的默认操作将摆脱滚动到这些 anchor 的页面顶部

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

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

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

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

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

$(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;
    }
});

很明显，委托(delegate)处理程序将捕获 的所有 单击并进行一些检查以查看目标是 anchor 还是在 anchor 内，href 仅为 # 。
我不认为它会更有效率，除非 DOM 中有很多 anchor 。

关于jQuery:如果href 只包含#，则防止在<a> 标签上跳转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30004365/