如何防止点击锚点时出现跳转？

Question

我使用 e.preventDefault(); 来禁用默认的锚链接行为。

有没有一种方法只在单击时防止跳转到目标位置？

我尝试过：

  var hash = window.location.hash;
  var link = $('a');
  $('a').click(function() {
    e.preventDefault();
    hash = "#"+link.attr("href");
  });

但它不起作用：http://jsfiddle.net/ynts/LgcmB/。

- A. Z.

Answer 1

$(document).ready(function() {
  var hash = window.location.hash;
  var link = $('a');
  $('a').click(function(e) {
    e.preventDefault();
    hash = link.attr("href");
    window.location = hash;
  });
});

你还需要在函数中指定事件参数。命名为e或event，然后可以对其进行操作。

- Muhammad Talha Akbar

---

很遗憾，没有跳转动作和 URL 更新。我想在点击后有 jsfiddle.net/ynts/Jgkmt/embedded/result/#anchor。 - A. Z.

一旦设置了 window.location，就会发生跳转到 #anchor :(. - A. Z.

@AspiringAqib 仍然没有运气：test_2.html。 - A. Z.

@AspiringAqib 我使用一个基于锚点的脚本来实现选项卡，效果很流畅。但是我想在选项卡被点击时将 #href-value 添加到地址栏中的页面地址。然而，一旦 URL 被更新，页面会跳转到 div#href-value，导致选项卡行为的“流畅性”丧失。 - A. Z.

似乎拦截点击事件并阻止它，然后从属性中提取href值并将其分配给窗口位置是一个冒失的脚本行为。也许更好的方法是： https://dev59.com/gWYq5IYBdhLWcg3wzDrk#34544031 - TaeKwonJoe

Answer 2

这是我所能想到的唯一解决方案，可以在各种桌面和移动浏览器或包含不同客户端 UI 库和框架的 Web 视图上始终有效。通过在滚动发生之前获取窗口坐标，我们可以还原并保持当前的滚动位置。

$('a').click(function (e) {
    var x = window.pageXOffset,
        y = window.pageYOffset;
    $(window).one('scroll', function () {
        window.scrollTo(x, y);
    })
});

- TaeKwonJoe

---

我尝试了不同的解决方案，但是你的解决方案非常好。它还可以用于搜索。 - Mirza Obaid

这对我来说产生了与仅使用e.preventDefault();相同的影响。 - Daniel

这不会在 WKWebView 中引起奇怪的行为！ - ANGOmarcello

@Daniel 和 @ANGOmarcello 这就是想要的想法："是否有办法仅通过点击来防止跳转到目标？" 事件的默认行为不会通过e.preventDefault() 或 e.stopPropagation() 来阻止。只有在绘制前通过滚动位置值恢复来防止 UI 的跳转行为，如所要求的那样。 - TaeKwonJoe

Answer 3

要仅仅防止“跳转”，您需要对目标元素使用不同于锚点中指定的id。

例如，要链接到一个新的选项卡，请使用：

<a href="#new" />

并且对于目标元素，需要掩盖其id。

<div id="new-tab"></div>

然后在你的脚本中将掩码附加到实际哈希值上，并使用它来获取元素。

$(window).on("hashchange", function(){
    var hash = this.location.hash;
    var mytab = $(hash + "-tab");
});

这将保留哈希位置更改在浏览器历史记录中，可以由后退/前进按钮控制，并在页面加载时检测到hashchange事件，如果用户输入具有指定哈希的页面。

- jumois

---

非常感谢您的评论。我很久以前就做过这个，但是我无论如何都想不起来我是如何解决这个愚蠢的跨页面重新加载滚动问题的。您的答案让我想起了那种好的掩盖方法！ - Tallboy

在不同的情况下非常有帮助。例如，在页面加载时定义一个布尔值，更改锚点，防止跳转。在页面加载后像往常一样处理内部锚点的点击。 - Avatar

Answer 4

你应该将onclick事件绑定到锚点上，并将return false;指定为结果。 return false;语句会导致默认的点击行为（跳转）不起作用。 你可以在这里找到更多信息：如何在加载页面时禁用锚点“跳跃”？

- Sergei Smirnov

---

在jQuery中，它可能看起来像这样： return false; });``` - Paul Wenzel

Answer 5

你需要将事件传递给函数。

         var hash = window.location.hash;
         var link = $('a');
         //pass event here
         $('a').click(function(e) {
           e.preventDefault();
           hash = "#"+link.attr("href");
         });

- AgnosticDev

---

当我在打字的时候，我看到另一个答案已经发布了。很好的答案，Aspiring Aqib。 - AgnosticDev

嗯，我不明白为什么当我看到别人已经回答了问题时，我回答问题后会感到疲惫。“此问题有1个新回答。点击加载”。:D - Muhammad Talha Akbar

Answer 6

在尝试了本页面上的其他答案后，这就是我所需要的：

  $('a').click(function (e) {
    e.preventDefault();
  });

- Daniel

Answer 7

您可以使用match和^来检测以#开头的内容。

$("a:link").on("click", function(e){
    if($(this).attr("href").match("^#")) {
        e.preventDefault();
        //some other stuff you want to do with the hash, like smooth scroll to anchor
        $('html, body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'fast');
    }
});

- Fanky

Answer 8

在井号后添加任何字符串：

<a href="#anystring">

- TV-C-1-5

---

OP正在传递 hash = "#"+link.attr("href");。 - undefined