简谈a标签与添加点击事件

由来：

最近在学习vue基础，想给a添加一个点击事件，没有注意到a的href设为了空，导致页面一直在刷新，点击事件根本就没有进去

更换方式

var watchExampleVM= new Vue({
  el:'#example',
  data: {
    loginType:'username'
  },
  methods: {
     doChange: function () {
       this.loginType =this.loginType =="username"?"email":"username";
       return this.loginType;
    
    }
 }
})

后来知道a标签的href会导致默认人的页面跳转事件，如果为空值，就会刷新页面。
因为这个小的问题，就重新看了一下给a绑定点击事件注意的小地方，记录一下
1.链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）；
2.如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；
3.假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，我们需要阻止默认行为,

"a"标签中使用点击事件的方法

1. 
   但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2. 
   
   这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏,这种方法可以阻止默认行为
   3.
   这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
   4.
   这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
   未完待续。。。