a是html语言标签。用于定义超链接，用于从一个页面链接到另一个页面，一般都是通过href或onclick属性来实现跳转功能。那如果2个属性同时存在，它们的执行顺序，相互影响有哪些区别呢？

示例代码：

下面代码是跳转谷歌，还是fly63前端网呢？

<a href="https://www.fly63.com" onclick="doSomthing()">fly63前端网</a>
<script>
function doSomthing(){
	window.location.href = "https://www.google.com";
}	
</script>

经过多个浏览器测试，最终结果是跳转fly63前端网。但doSomthing事件是在跳转fly63前端网之前执行了的，只是location.href被中止取消了。

如果不执行href里的链接，在onclick中添加return false即可：

<a href="https://www.fly63.com" onclick="doSomthing();return false;">fly63前端网</a>

或者通过e.preventDefault();来阻止默认事件，比如：

<script>
function doSomthing(){
	let e=window.event || arguments.callee.caller.arguments[0];
	e.preventDefault();
	console.log("执行doSomthing")
	window.location.href = "https://www.google.com";
}	
</script>

区别如下：

1、链接的onclick事件被先执行，其次是href属性下的动作（页面跳转，或 javascript 伪链接）；注意：ie6中href先触发，onclick后触发。

2、如果想让href属性下的默认动作不执行有2种方式：

onclick必须得到一个false的返值
onclick方法中设置e.preventDefault()来阻止默认事件。

3、如果页面过长有滚动条，且希望通过链接的onclick事件执行操作。应将它的href属性设为javascript:void(0);，而不要是#，这可以防止不必要的页面跳动；在这里javascript:void(0),没启实质上的作用，它仅仅是一个死链接，只会执行onclick事件。

4、如果在链接的href属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；

注意事项:

但是以上的onclick事件不能包括οnclick="window.open('url',' ');"这种情况，要是onclick有了window.open但是又不想页面发生跳转，我们可以在当前页面嵌套一个iframe，给它起一个name="newName"和id="newName"，而把里面写入空的html、head、body;并在onclick里写入"window.open('url',' newName');"，这样，当前页面就相当于做了一个假跳转，也不用href属性防止跳转了。

推荐写法：

由于2则都可以使用js事件方法，那么不同的场景推荐如下：

1、在不需要传递this作为方法的参数时候，可以使用href="JavaScript: "方式（但不推荐）：

<a href="javascript:doSomthing();">fly63</a>
<script>
function doSomthing(){
    console.log('href event')
}
</script>

不推荐理由：尽量不要用javascript:协议做为a的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

2、如果需要使用this参数，只能onclick的方法（推荐）

<a href="javascript:void(0);" onclick="doSomthing(this)">fly63</a>
<script>
function doSomthing(self){
   console.log(self) 
   //处理其他事务
   window.location.href = "https://www.fly63.com";
}
</script>

链接: https://www.fly63.com/article/detial/12355