Javascript 阻止导航并获取目标链接

我希望通过Ajax更改内容代码，而不是导航和重新加载页面，从而使我的网站更快。但我也关心非Javascript用户，所以我希望使用普通链接而不是onclick事件。我想阻止导航和获取目标href链接来更改内容

有没有办法通过Javascript/jQuery实现这一点？显然jQuery支持

event.preventDefault（）但我认为它不能让您从该事件中获取目标链接…
我认为jQuery可以帮助您：

$('body').on('click', 'a', function(e){
  e.preventDefault();
  doSomethingWith($(this).attr('href'));
});

这可以在JavaScript中完成（无需使用jQuery）

捕获文档中您可以使用的所有单击

document.body.addEventListener('click', function(e) {
  e.preventDefault()
  const href = e.target.href
})

此外，您还应添加额外的检查，确保单击的元素与href:

e.target.tagName.toLowerCase() === 'a'

下面是一个工作代码示例：

document.body.addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'a') {
    e.preventDefault()
    const href = e.target.href
  } 
})

使用此功能，您将能够捕获所有单击，如果用户单击了
a
，则检查并仅使用普通javascript获取
href
属性

更新
基于@AVAVT注释，如果您需要处理嵌套在
a
中的内容，如

<a href="https://google.com"> 
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"> 
</a>

因为
target
属性将导致精确单击的项（在本例中为
img
），我们需要检查它是否是
a
的子项，然后防止默认行为

注:

jQuery解决方案很简单，所以如果页面上已经有jQuery，那么它是首选方案

否则，您可以使用纯javascript不使用它。
您不应该将答案中的代码复制到问题中。所有这些都使未来的访问者更难理解。这个解决方案仍然包含缺陷。如果
a
中有嵌套元素，例如
，
e.target
将是
img
元素，而不是
a
。请参阅此JSFIDLE:。在你解决了那部分问题之后，这将是一个完整的解决方案。就我个人而言，由于OP提到s/他已经在使用jQuery，我认为我的解决方案要短得多，也更容易理解。这是我认为jQuery仍然优于纯js的一种情况，因为它更易于阅读。既然可以使用e.currentTarget，那么为什么还要费心查找元素呢？e.currentTarget引用的是注册事件的元素，而不是触发事件的元素，在这种情况下，它将始终是所需的“a”标记。@Meyhem如果您是指我答案中的代码片段，您会注意到
currentTarget
是
body
，因此查找
a
并没有什么帮助。你的意思是说最好有很多偶数的监听器——每个
a
一个监听器？@uladzimir你是对的，只有当点击事件直接在所有锚上注册时，这才有效。我错过了。
document.body.addEventListener('click', function(e) {
  if (e.target.closest('a')) {
    e.preventDefault()
    const href = e.target.closest('a').href
  } 
})