jQuery：防止跳转<；a>；如果href仅包含#

如果标签在href中设置了散列，我想防止它在单击时将页面跳转到顶部。因此，如果用户单击：

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

什么都不应该发生

然而：

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

应该像正常行为一样工作

使用“javascript:；”或“javascript.void（0）”：

---

在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中有大量锚定，否则我不认为它会更有效。

我需要针对我网站上所有具有href=“#”--您的解决方案是一种内联攻击，它不会针对href和哈希。@Henrikpeterson:What makes

javascript:更多的是黑客行为，而不是你阻止它正常工作的
#
值？为什么你需要这里的链接？如果它什么也不做？@AlexSikilinda它用于下拉菜单单击…这将为每个匹配的元素添加一个处理程序。委托活动不是更好吗#curious@Mackan您应该发布一个答案演示如何使用单个处理程序。@adeneo：根据我的经验，委托点击处理从来都不是性能问题。点击是一种用户行为，因此判断它与人的时间有关，而不是与计算机时间有关。不管怎么说，点击都会冒泡，所以唯一的额外时间实际上是循环检查，看看我们是否关心点击，甚至在最复杂的页面中，它将是——什么——20、30次迭代，最多？（每个父/子链接一次迭代，DOM不会太深。）并不意味着委派一定是正确的答案，只是一个有用的替代方案，特别是对于jQuery这样的良好库支持。@adeneo:正如我所说，委派不一定是正确的答案。：-）99%的情况下，除非动态添加和删除元素，否则我将使用直接处理程序，尽管随着我对委托的熟悉程度越来越高，我会更多地使用它。使用此问题未举例说明的直接处理程序的一个原因是：假设我要处理单击并停止传播？有了委托处理程序，点击已经从元素传播到我处理它的地方，我所能做的就是阻止它进一步。和以往一样，这是一个为特定工作选择正确工具的问题。@adeneo:我没有回答你的问题，对不起：是的，我经历过直接处理者是一个问题，但很少，这涉及到我在上面没有提到的委托的其他用法：如果我们讨论的是数千个元素（例如一个大表），委派确实有助于降低内存使用。同样，这里的用例可能不是这样，虽然我想OP没有告诉我们链接是什么。。。我对你最初的回答没有异议。：-）但如果我能感谢你的编辑，我会再次投票。
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;
    }
});