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

return false就是答案，但我通常会这样做：

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

在运行代码之前停止发生操作。

Answer 5

虽然它看起来很受欢迎，但href ='＃'不是JavaScript的神奇关键字，它只是一个空锚的常规链接，因此它毫无意义。你基本上有两个选择：

为不知道JavaScript的用户代理实现替代方法，使用 href 参数指向它并取消使用JavaScript的链接。 E.g：

<a href="close.php" onclick="close(); return false">
当 noscript 备选方案不可用或不相关时，您根本不需要链接：

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

Answer 6

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

例如

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

Answer 7

使用href = "JavaScript:Void(0);"

Answer 8

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

rightProp

Answer 9

如果您的代码通过了eventObject，您可以使用preventDefault();返回false也有帮助。

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

Answer 10

对于迟到的回答感到抱歉，但没有人提到这一点。只需将<a>Do Stuff</a>设为href而不添加cursor: pointer，并将样式$(document).ready(function(){ $("#Element").click(function(){ alert("Hello"); //Do Stuff }) });添加到元素中。然后，您可以使用 jquery 管理任何点击事件，如下所示

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a id="Element">Do Stuff</a>

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>AngularJS Demos</title> 
    <script src="https://code.angularjs.org/1.3.9/angular.js"></script> 
  </head>
  <body> 
    <script  type="text/javascript">
      var samplesModule = angular.module('demoApp', []); 
      samplesModule.controller('SimpleController', SimpleController);
      function SimpleController($scope) {
        $scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
      }
    </script> 
    <div class="container" data-ng-app="demoApp" data-ng-controller="SimpleController">
      <h3>Adding a Simple Controller</h3>
      <ul>
        <li data-ng-repeat="name in names">{{name}}</li>
      </ul>
    </div> 
  </body>
</html>

＆＃13;

Answer 11

围绕链接换行div语句，让链接返回false，在点击时将javascript功能添加到div ...

<div onClick="javascript:close();">
    <a href="#" onclick="javascript:return false;">Close</a>
</div>

Href =“＃”不要滚动

11 个答案: