Href="#"不要滚动

Question

我对JS还不是很熟悉 - 所以想问一下，你知道如何解决这个问题吗？

目前我在我的代码中有以下内容

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

我有一段运行JS来关闭一个框的代码。问题在于当用户点击链接时，href="#"会将用户带到页面顶部。

如何解决这个问题，使其不会发生这种情况？也就是说，我不能使用像onclick="return false"这样的东西，因为我想象中那会阻止JS工作。

谢谢

- Tom

Answer 1

通常的做法是在javascript的click事件处理程序中返回false。这样既可以防止事件冒泡，又可以取消事件的正常操作。根据我的经验，这通常是您想要的行为。

jQuery示例：

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

如果你只是想简单地阻止默认的操作，可以使用 preventDefault 来代替。

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

- tvanfosson

---

+1 - 注意，如果你没有使用jQuery，请确保检查window.event是否存在，如果存在，则在返回false之前设置window.event.returnValue = false - 因为IE不会总是停止冒泡，除非你这样做。 - Rex M

虽然这样做是可行的，但在函数开头使用event.preventDefault才是正确的方法。 - David Murdoch

@David - 我已更新以记录您的评论。我的经验是，在几乎所有情况下，所需的行为是取消正常操作并防止冒泡。你的实际情况可能有所不同。 - tvanfosson

-1 被撤回了。:-) 然而，如果在返回 false 之前有未捕获的异常，链接将被跟踪（或者在 OP 的情况下是 #）。 - David Murdoch

Answer 2

解决这个问题最简单的方法是在#号后面添加另一个字符，就像这样：

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

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

只要确保你没有将节分配给 "a"，否则它将进入页面的该部分。（尽管我以前经常看到这种情况）默认情况下，“#”本身会跳转到页面顶部。

- Gaff

---

感觉像是个取巧方法，但实际上是一个简单的解决办法。 - jobbert

这太棒了！ - George Chalhoub

这个解决方案为我的工作带来了一些优雅的简单性。谢谢。 - dotParx

绝妙的解决方案！ - Stanislav Prusac

喜欢它。漂亮而简单。 - werner

Answer 3

JavaScript版本：

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

jQuery版本：

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

这很好地完成了工作！ :)

- No0dLz

Answer 4

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

例如：

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

- Vogon Jeltz

Answer 5

return false是正确的答案，但我通常会这样做：

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

阻止事件在运行代码之前发生。

- Martin

---

return false 能够起作用，但并不是所有情况下的答案。 return false 会同时调用 event.preventDefault 和 event.stopPropagation。stopPropagation 将阻止对象上附加的任何其他事件触发。这可能是你想要的，也可能不是。 - David Murdoch

Answer 6

虽然看起来很流行，但 href='#' 不是 JavaScript 的魔法关键字，它只是指向一个空锚点的常规链接，因此它非常无意义。你基本上有两个选择：

1. 为不支持 JavaScript 的用户代理实现替代方案，使用 href 参数将其指向并使用 JavaScript 取消链接。例如：

<a href="close.php" onclick="close(); return false">

2. 当 noscript 替代方案不可用或不相关时，你根本不需要链接：

<span onclick="close(); return false">关闭</span>

- Álvaro González

---

+1 对于“#”只是一个没有特殊含义的空锚点...谢谢。 - Faisal Vali

Answer 7

像ROFLwTIME的例子一样，一个简单的方法是在href中放两个##。虽然不常见，但对我有用。

  <a href='##' >close</a>

- Vilmar Pavesi

Answer 8

我喜欢使用jQuery。它非常简单。

$('a').on('click',function(e){
 if($(this).attr('href')=='#')
  return e.preventDefault();
});

- Kimliang Mich

Answer 9

如果您的代码已经传递了eventObject，您可以使用preventDefault()来阻止默认行为；同时返回false也是有帮助的。

mylink.onclick = function(e){
 e.preventDefault();
 // stuff
 return false;
}

- Ballsacian1

Answer 10

抱歉回复晚了，但是没有人提到这一点。 只需将其设置为<a>Do Stuff</a>，不需要任何href，并将样式cursor: pointer添加到元素中。 然后您可以使用jquery来管理任何单击事件，如下所示

$(document).ready(function(){
  $("#Element").click(function(){
     alert("Hello");
    //Do Stuff
  })
});

#Element {
  cursor: pointer;
}
#Element:hover {
  color: #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a id="Element">Do Stuff</a>

- Bassel Ahmed