Href ="#"不要滚动

Question

我对JS很新 - 所以只是想知道你是否知道如何解决这个问题.

目前我的代码中有

<a href='#' class="closeLink">close</a>

哪个运行一些JS来关闭一个盒子.我遇到的问题是当用户点击链接时 - 当发生这种情况时,href ="#"会将用户带到页面顶部.

如何解决这个问题呢？即我不能使用某些像onclick ="return false",因为我想这将阻止JS工作？

谢谢

Answer 1

通常的做法是从你的javascript点击处理程序返回false.这样既可以防止事件冒泡,也可以取消事件的正常操作.根据我的经验,这通常是您想要的行为.

jQuery示例:

$('.closeLink').click( function() {
      ...do the close action...
      return false;
});

如果您想简单地阻止正常操作,则只需使用preventDefault.

$('.closeLink').click( function(e) {
     e.preventDefault();
     ... do the close action...
});

Answer 2

解决此问题的最简单方法是在磅符号之后添加另一个字符,如下所示:

<a href='#a' class="closeLink">close</a>

问题解决了.是的,就这么简单.有些人可能会讨厌这个答案,但他们不能否认它是有效的.

只是确保你没有实际分配给"a"的部分,否则它将转到页面的那一部分.(尽管如此,我不会经常看到这一点)默认情况下,"#"会自动显示在页面顶部.

Answer 3

JavaScript版本:

myButton.onclick=function(e){
    e.preventDefault();
    // code
    return false;
}

jQuery版本:

$('.myButtonClass').click(function(e){
    e.preventDefault();
    // code
    return false;
});

这只是做得好!:)

Answer 4

您可以使用的一种选择是不使用href = "#"，而是href = "javascript:;"允许您在不滚动的情况下运行 onclick 处理程序。

例如

<a href="javascript:;" onclick="doSomething()">Do Something</a>