Question

我有以下html + js代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<a href="#" id=key onclick="func(0)">foo</a>

</body>

<script type="text/javascript">
function func(k){
    alert(1);
    return false;
}   
</script>
</html>

你能解释如何重构下面的代码，点击href代码func后执行但＃不添加到URL并且页面不应重新加载？

Answer 1

使用javascript:void(0);代替#，如下所示：

<a href="javascript:void(0);" id=key onclick="func(0)">foo</a>

Answer 2

您只需删除href属性：

<a id='key' onclick="func(0)">foo</a>

Answer 3

将其更改为：

                            vvvvvvv
<a href="#" id=key onclick="return func(0)">foo</a>

Answer 4

我想你忘记了＆＃34;键＆＃34;

中的引号

<a href="#" id="key" onclick="func(0)">foo</a>

Answer 5

为了更加语义正确，我将使用带有以下onclick的按钮：

<button id=key onclick="return func(0)">foo</button>

这样就不需要使用e.preventDefault / return false。

Answer 6

在func内部，您可以执行以下操作：

func(event){ event.preventDefault(); /* More code here! */ }

preventDefault将阻止重定向，在该行之后，您可以添加所需的任何逻辑。

但是，如果您不想重定向，建议使用button而不是a

超链接点击后如何防止重定向？

6 个答案: