a标签中href和onclick属性同时存在的问题
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>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
