javascript - 如何防止 jQuery 在点击时更改 href 属性？

Question

我有一组 anchor 标记，如下所示:

<a href='#123'></a>

我使用 #123 作为 ID，并将其提供给 AJAX 调用。我点击链接即可调用电话。单击链接后，除了显示 AJAX 调用的结果之外，还会发生两件事:

1. 地址栏中的 URL 获取哈希值，如下所示:www.localhost.com/foo#123。
2. 所单击链接的 href 属性从 #123 更改为 AJAX 地址 www.localhost.com/bar#123。如果我不进行 AJAX 调用(出于测试目的)，则会更改为地址栏中的当前 url:www.localhost.com/foo#123。

如果我使用event.preventDefault，那么这两件事都不会发生。我想保留 1.(更改地址栏中的哈希值)，但我不想保留 href 的值，否则，后续单击相同的值链接导致错误。

我该怎么做？

我的代码

我将包含我的代码的简化版本，它仍然会产生相同的效果。

makeAjaxCall = (brandId) ->
  alert 'OK'

$ ->
  $('.box-trigger').on 'click', (e) ->
    makeAjaxCall($(this).attr('href'))

此代码在页面 www.localhost.com/foo 上加载。如果我单击该链接，则会生成一条“确定”警报，地址将更改为 www.localhost.com/foo#123 以及该链接的 href也更改为 www.localhost.com/foo#123。

有关 foo 和 bar 的说明

在 makeAjaxCall 函数中，如果我确实对 URL www.localhost.com/bar 进行 ajax 调用，则 href更改为 www.localhost.com/bar#123。不过，我删除了 Ajax 调用来尝试调试问题。在这种情况下，href 会更改为当前 url，在本例中为 www.localhost.com/foo#123。

解决方案

我最终使用了 event.prevenDefault + 手动将哈希值附加到地址栏 URL，如下所示:

$ ->
  $('.lightbox-trigger').on 'click', (e) ->
    e.preventDefault()
    makeAjaxCall $(this).attr('href')
    window.location.hash = $(this).attr('href')

Answer 1

解决方案建议1

我会使用 data 参数，正如 Optimus 在评论中所建议的那样。像这样:

HTML

<a class="box-trigger" data-id="#123"></a>

注意:我没有 href根本不包含参数，这是因为我们根本不希望 URL 受到影响，对吗？毕竟这是一个 AJAX 调用。 (然而，这将使大多数浏览器无法将 <a> 标记识别为链接。它将丢失其“链接样式”。您可以通过简单地使用 CSS 对其进行样式化来轻松模拟这一点。)

CoffeeScript

makeAjaxCall = (brandId) ->
  alert 'OK'

$ ->
  $('.box-trigger').on 'click', (e) ->
    makeAjaxCall($(this).data('id'))

注意:我从未使用过 CoffeeScript，所以这只是一个猜测。

解决方案建议2

如果您出于某种原因希望将 ID 作为 href 内的 anchor ，你可以看看 JQuery event.preventDefault()功能。这可能只会阻止 URL 更改以及您遇到的所有其他行为。