Question

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

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

Answer 1

我认为jQuery的.attr()可以帮助你：

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

Answer 2

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

要捕获文档中的所有点击，您可以使用

void remove_tail_newline(search_for)
{ size_t len = strlen(str);
   if(len > 0 &&str[len-1] =='\n') str[len -1] ='\0';
}

你还应该添加额外的检查，点击的元素正好是与href的链接：

document.body.addEventListener('click', function(e) {
  e.preventDefault()
  const href = e.target.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 } })并使用简单的javascript获取a属性。 http://youmightnotneedjquery.com

<强>更新基于 @AVAVT 注释，如果您需要处理嵌套在href内的内容的案例，例如

只需使用<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的子项，然后阻止默认行为。

注意：

jQuery解决方案很简单，所以如果你已经在页面上使用了jQuery，那么它是首选。

否则你可以使用普通的javascript来解决它。

防止导航并获得目标链接

2 个答案: