前端a标签_超链接触发点击事件注意事项

a标签触发点击事件

多个方法判别

1. href="javascript:void(0)" onclick="method(this)" 推荐
   这种方式更加符合开发规范，点击超链接自身事件return 为undefined，地址不发生跳转，之后触发onclick事件。taobao的主页，采用的是第1种方法，而alibaba的主页是采用的第5种方法，和我们的区别是每个href里的javascript方法都用try、catch包围。

2. href="javascript:;" οnclick="method(this)" 推荐
   这种方式点击超链接自身事件相当于执行了一条空js代码，地址不发生跳转，之后触发onclick事件。

3. href="#" οnclick="method()" 不推荐
   这种方式是我们初学前端就常会使用的，#是标签内置的一个方法，代表top的作用。点击超链接会回到页面的最顶端。

4. href="#" οnclick="method();return false;" 推荐
   这种方法点击执行了js函数后return false，阻止了事件本身的默认行为，页面不发生跳转，执行后还是在页面的当前位置。

5. href="javascript :js_method();" 不推荐

   • 缺陷一： 在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句。
   • 缺陷二： 直接将js方法暴露在浏览器的状态栏。