Question

到目前为止（如果我可以避免因不使用不显眼的JS而诽谤！）我一直在使用以下形式的锚点（用于AJAX加载）和内联onclick属性：

<a href="http://example.com/some/specific/link.php?hello=mum" 
   class="menu" id="menu_0" 
   onclick="loadPage(this.href, this.id); return false;"
   >Hello Mum</a>

我很欣赏这会覆盖任何其他onclick事件监听器，但可以正常取消在几个旧应用程序中加载href页面的标准锚点响应。

最近，我一直在查看一些（较旧的）js手册和在线资源，以开发一些更复杂的事件触发代码。我了解捕获和冒泡的想法，以及使用preventDefault和window.event.returnValue = false覆盖默认事件的跨平台方法，并根据需要提供适当的向后兼容stopDefault()功能。

所以，我希望有人可以就这里的最佳做法提出建议，或者我之前使用的这种内联代码方法确实存在什么问题呢？显然我可以将所有return false;语句更改为stopDefault();，但这是否值得？

Answer 1

我总是这样做：

$(document).ready(function(){
    $('a.menu').on('click', function(event){
        event.preventDefault();
    });
});

您可以在if语句或所需内容中设置event.preventDefault()。

Answer 2

您可以将<span>与链接类一起使用，然后动态重新添加链接功能。

<span class="link">Go here!</span>
<span class="link valid" href="https://www.google.com/">I'm a link!</span>

span.link {
    color: blue:
}
span.link:hover {
    text-decoration: underline;
}

for (const a of document.querySelectorAll('span.link.valid')) {
    a.addEventListener('click', function(e) {
        window.location.assign(this.getAttribute('href'));
    });
}

防止锚标记默认的最简单方法或最佳实践

2 个答案: