jquery - # HREF 中的(散列)字符会阻止 PreventDefault 工作

Question

我之前发布了一个问题，当在链接 ( original question here ) 中指定 HREF 时，我的 jQuery 无法工作。

最常见的建议答案是使用 PreventDefault，但由于某种原因，如果 HREF 中有哈希/ anchor ，则此方法不起作用；例如，如果 URL 是“http://www.google.com ”，它会阻止默认行为并按预期运行 jQuery，但如果是“http://www.google.co.uk#whatever ”，它会忽略 PreventDefault 并跟踪链接。

我正在使用的链接有一个目标(实际上，只是同一页面内的目标)。对于这种奇怪的行为有解决方法吗？

HTML

<li><a id="OfficeNav-Bath" class="first" href="#bath" >Bath</a></li>

Jquery

<script> <!--Offices jquery -->
        $(function() {$("#OfficeNav-Bath").click(function(e){e.preventDefault(); $('.office').removeClass('visible');});});
</script>

Answer 1

如果没有关于您正在使用的 jquery 的确切版本的任何信息，在 href 中包含 # 似乎使用 jQuery 1.8.2 没有问题。

在 href 中使用 jsFiddle # 没有任何影响，并且 event.PreventDefault() 按预期工作。

DEMO - href

中的 event.PreventDefault() 和 #

上面的演示代码如下，以防链接旋转。

HTML:

<a id="OfficeNav-Bath" class="first" href="http://www.google.com#whatever" >click me</a>

脚本:

$("#OfficeNav-Bath").on("click", function(event){
  event.preventDefault();
  alert("Prevent Default Works");
})