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

Question

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

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

什么都不应该发生。

但是：

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

应该正常工作。

Answer 1

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

另一个选项是委托事件处理程序，如 cmets 中所述

$(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 中有很多锚点，否则我认为它不会更有效。

Answer 2

使用“javascript:;”或“javascript.void(0)”：

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