如何防止锚点点击跳转？

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 库和框架的 Web 视图中一致工作的解决方案。通过在滚动发生之前获取窗口坐标，我们可以恢复并保持当前的滚动位置。

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

Answer 3

为了only防止“跳转”，您必须为目标元素使用与锚点中指定的不同的id。

例如对于新选项卡的链接，请使用，

<a href="#new" />

对于目标元素掩码 id

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

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

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

这会保留浏览器历史记录中的哈希位置更改，这些更改可以通过后退/前进按钮控制，并且如果用户输入指定哈希的页面，则可以在页面加载时使用

hashchange

事件检测到。

Answer 4

您应该将 onclick 事件绑定到锚点并指定

return false;

作为结果。

return false;

语句导致默认点击行为（跳转）不起作用。 您可以在这里找到更多信息：如何在加载页面时禁用锚点“跳转”？

Answer 5

您需要在函数上传递事件。

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

Answer 6

第一次尝试此页面上的其他答案后，这就是我所需要的：

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

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');
    }
});

Answer 8

在哈希值后添加任意字符串：

<a href="#anystring">