javascript - 阻止导航并获取目标链接

Question

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

有没有办法用 Javascript/jQuery 来实现？显然 jQuery 支持 event.preventDefault(); 但我不认为它能让你从那个事件中获取目标链接......

Answer 1

这可以在 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 属性。 http://youmightnotneedjquery.com

更新 基于 @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>

只需使用 e.target.closest('a')

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

因为 target 属性将导致被精确点击的项目(在本例中为 img)我们需要检查它是否是 a 的子项并且然后防止默认行为。

注意:

jQuery solution is simple, so it's preferred, if you already have jQuery on the page.

否则你可以不用它而使用普通的 javascript。