href =“javascript:func()”vs href =“#”onclick =“javascript:func()”

时间:2013-07-22 09:17:49

标签: javascript html

<a href="javascript:expand()">  and <a href="#" onclick="javascript:expand()">

有什么区别?

我知道href="#"是现在更为标准的做法。我的问题是我有一个标准的下拉菜单,当用户点击切换时会扩展/折叠。

如果我为下面的代码执行href="#",只要有人点击展开页面,请始终向右滚动到顶部,这是用户友好点所不能接受的。

如果我在用户点击展开时使用href="javascript:expand()",则页面不会移动,一切正常。

如果我只使用href="javascript:expand()",那么会有任何问题吗?或者如何修复href="#",以便在用户点击展开时页面不会滚动回到顶部。

感谢。

编辑:我知道之前可能会问过这个问题,但我从我的角度来看这个问题。我只想要一个建议而不是解释。

5 个答案:

答案 0 :(得分:3)

如果您的JavaScript onclick事件处理程序返回false,则不会进行滚动。你可以这样做:

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

如果您的onclick处理程序未返回false,则会跟踪href链接。在href="#"的情况下,这意味着滚动到页面顶部。

答案 1 :(得分:3)

最好的选择是不使用<a>元素。使用任何语义上合适的元素或仅使用<div>

答案 2 :(得分:0)

如果您想保留href="#"可以做的话

function expand(e) {
  e.preventDefault()
  // ...
}

可防止发生默认的锚点击行为,或者您可以在结尾处返回false。

对于其他人,请看一下这个问题:JavaScript function in href vs. onclick,我认为这基本上就是你要问的问题。

答案 3 :(得分:0)

你应该尝试:

<a href="javascript:void(0);" onclick="expand();">Expand</a>

答案 4 :(得分:-1)

试试这个,而不是href =“#”替换这个href =“javascript :;”