如何防止锚点击跳转？

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/.

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然后您可以操纵它.

Answer 2

这是我能提出的唯一解决方案,它可以在所有桌面和移动浏览器中使用各种客户端UI库和框架.通过在滚动之前获得窗口坐标,我们可以恢复并保持当前滚动位置.

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

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用户进入指定了哈希的页面时使用该事件检测到.