Question

我正在从MySQL / PHP查询创建一个锚标记列表; anchor标签调用JavaScript函数。

我拥有的'捕获22'是：

href =“＃”会使页面跳到顶部（非常烦人）
删除href =“＃”表示光标不会随着锚标记悬停而改变，锚标记也没有锚标记的外观。

我知道有一种方法可以用JavaScript（可能是jQuery）处理这个问题，但我不记得目前是怎么回事。但是，我真的更喜欢更简单的HTML修复（如果存在），不需要我进入JavaScript。

编辑： “不要求我进入 JavaScript”==“不需要在JavaScript中进行广泛的更改。”

Answer 1

在您的javascript函数中，您应该return false，或者使用jquery，您可以使用preventDefault()

示例：

$('a').click(function(event) {
    event.preventDefault();
    // do something
});

或者在你的情况下：

<a href=“#” onclick="foo();return false;">

或者将href更改为javascript:void(0)：

<a href="javascript:void(0)" onclick="foo();">

理想情况下，您的链接会在没有javascript的情况下降级，因此通常会避免使用第三个选项。

Answer 2

为您提供更简单的HTML修复：就个人而言，对于普通测试链接，我只使用href=""

对于指向javascript函数的链接，我倾向于使用href="javascript:;"。无论哪种方式，你都会停止跳页。

Answer 3

在onclick之后或在foo（）函数内返回false。

Answer 4

您需要在Click事件处理程序中的某处调用event.preventDefault();。在vanilla javascript中，可以这样做：

<script type="text/javascript">
  function foo(e) {
    e.preventDefault();
    // other code
  }
</script>
<a href="#" onclick="foo(e);"></a>

此外，您还可以返回false：

<a href="#" onclick="foo();return false;/>

这也可以在jQuery中完成：

$('.mylink').click(function(e) {
  e.preventDefault();
  // other code
});

使用return false;的缺点是，这也可以防止事件冒泡DOM。如果你不关心事件冒泡，可以使用false，但我个人认为最好使用event.preventDefault();，除非你特别想停止事件冒泡。

Answer 5

<html>
    <head>

    </head>
    <body>
    <style>
    a {
        text-decoration: underline;
    }
    a:hover {
        text-decoration: underline;
    }
    </style>
    <script type="text/javascript">
      function foo() {
        alert('Hello World');
      }
    </script>
    <a onclick="foo();">Click Here</a>
    </body>
    </html>

只需添加CSS并删除href似乎没问题。

锚标签列表创建

5 个答案: