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

仅阻止＆＃34;跳转＆＃34;你必须使用不同于目标元素的id而不是锚中指定的id。

e.g。如需指向新标签页的链接，

<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;语句导致默认点击行为（跳转）不起作用。您可以在此处找到更多信息：How to disable anchor "jump" when loading a page?

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

您可以将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 7

在首先尝试此页面上的其他答案之后，这就是我所需要的：

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

如何防止锚点击跳转？

7 个答案: