a标签的 onclick 和 href 哪个先执行？

Posted 2021-02-10 Burning_Leaf

原文链接：https://www.cnblogs.com/YYvam1288/p/7148929.html?utm_source=itdadao&utm_medium=referral

 

以下这种写法，onclick 事件先执行， href 属性下的动作后执行（页面跳转或 javascript 伪链接），如果不想执行 href 属性下的动作，onclick 需要返回 false。

<a href="https://www.baidu.com/" onclick="doSomething()">链接</a>

这种写法我在写侧边导航栏的时候用到了，就是点击事件和页面跳转事件同时存在，可能页面跳转事件处理并没有覆盖掉点击事件的处理程序，所以暂时没有出现什么问题，但总感觉怪怪的，以后发现问题的话再补充吧……

 

如果实际应用中，确实需要 a 标签来响应 onclick 事件的，且不想执行 href 属性下的动作，推荐以下3种写法：

1、 javascript:void(0) 相当于一个死链接，href 不执行

<a href="javascript:void(0)" onclick="doSomething()">链接</a>

 

2、onclick 返回 false，href 不执行

<a href="https://www.baidu.com/" onclick="doSomething();return false;">链接</a>

 

3、onclick 返回 false，href 不执行

<a href="https://www.baidu.com/" onclick="doSomething();event.returnValue=false;">链接</a>