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

 转载：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>

 

以下这种写法也可以用，但不推荐

<a href="javascript:open()">链接</a>

不推荐原因：尽量不要使用 javascript: 协议作为 a 的 href 属性，这样会导致不必要的触发 window.onbeforeunload 事件，在IE下还会使 gif 动画图片停止播放。

 

再严重一点，可能会有人这么写

<a href="javascript:open()" οnclick="doSomething()">链接</a>

不推荐原因：我在想，如果这两个事件里处理的东西没有重叠，不会互相覆盖的话，那这么写可不可以？有待考证