a标签href与onclick之间的碰撞

最近碰到了一个有意思的问题，如果a标签同时拥有href和onclick，并且onclick也会执行跳转页面的功能，那么到底是跳转到href提供的链接去，还是根据onclick方法里面的跳转逻辑跳转到对应页面去呢，说是我自己刚开始也是不确定的，于是开始进行试验。

  
    
    
    
    
  
  
    百度一下
  
  

点击百度一下后，发现最终跳转的地址确实是百度。
那么改变location.href的语句是没有执行吗，其实并不是，可以看下控制台的打印结果

发现window.location.href = "https://www.google.com"这句是执行了的，那么为什么最终跳转的还是百度呢？我们先看下网络请求。

发现请求google.com之后取消了请求，紧接着请求了百度，请求百度成功后，就跳转到了百度的页面。
如果想要href指向的地址失效，只需要在点击事件函数里面加上阻止冒泡的语句就可以。

a.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("+++++++++");
    window.location.href = "https://www.google.com";
  console.log("----------");
});

从上面的试验结果来看，是onclick方法里面的逻辑先执行，还是先执行href？
其实结果很明显，我们发现是先请求的google，然后再请求的百度，由此可以得出先执行onclick中的逻辑的。我们换个方式探究一番

  
    
    
    
    
  
  
    百度一下
    log
  
  

点击log后，打印结果如下