HTML锚链接-href和onclick都可以吗？

93

我想编写一个锚标签，该标签执行一些JavaScript，然后继续将其放到href需要它的地方。调用执行我的JavaScript的功能，然后将其设置window.location或定位top.location到我的href位置无效。

因此，假设我在页面上有一个ID为“ Foo”的元素。我想编写一个类似于以下内容的锚点：

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

单击此按钮后，我要执行runMyFunction，然后将页面跳转到#Foo（不引起重新加载-使用top.location将导致它重新加载页面）。

有什么建议吗？我很高兴使用jQuery，如果它可以在这里帮助您...

— 精神病学
source

return true;是解决方案，但您也可以致电location.hash = '#Foo'。它不会重新加载页面。

— shuangwhywhy

130

只是return true相反？

onClick代码的返回值决定了链接的固有单击操作是否被处理-返回false意味着未处理该链接，但是如果您返回，true则浏览器将在函数返回并继续处理后继续处理它。锚。

— 琥珀色
source

1

如果onclick不返回任何内容怎么办？

— maciek，2015年

1

@maciek，则将返回值视为undefined对于这些目的被视为假的返回值。

— 2015年

1

过去，每当我使用js函数启动新页面，并在href属性中仅输入“＃”时，我都会返回“ -1”以防止执行默认操作，通常是浏览器跳转到页面顶部，或者有时我什么也不会退回。最近，我不得不按照@Amber的建议修改所有这些页面...如果我不希望页面跳转，则应专门返回false。

— 兰迪

1

@Amber似乎如果onclick不返回任何内容，则将处理链接固有的单击动作。

— iplus26

另外，您不应在点击事件处理程序上使用event.preventDefault（）。

— 鲁宾

36

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

和

function runMyFunction() {
  //code
  return true;
}

这样，您将执行函数，然后单击链接，并且在函数成功运行后也将完全跟随该链接。

— n1313
source

1

如果您的函数在延迟的函数调用后返回true，似乎不起作用？

— DavidVdd 2014年

7

如果链接仅在函数运行成功的情况下更改位置，则执行do onclick="return runMyFunction();"并且在函数中您将返回true或false。

如果您只想运行该功能，然后让anchor标签完成其工作，只需删除 return false语句即可。

附带说明一下，您可能应该改用事件处理程序，因为内联JS并不是一种最佳的处理方式。

— 佩里克斯
source

0

进行干净的HTML结构时，可以使用它。

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>

展开摘要

— 卡尔·詹姆斯·阿曼丹
source