js用addeventlistener绑定事件，阻止默认事件。

       var linkG = document.getElementById('g');

                linkG.addEventListener('click', function(e){

                        test();

                        e.preventDefault();

                }, false);

测试地址：http://thecdn.sinaapp.com/page/demo/link-test3/

这次，所有的地址都不会修改，且都不会跳转了，获取数据也正常了。

和之前的区别在哪里呢？

event.preventDefault();

如果我们要使用a标签做按钮使用，那么一定要记得阻止默认事件。

或许你会说，你这个写的麻烦，我一个return false就解决问题了，

如果真的是这样的话，那么请自行尝试，至少我测试chrome中第三个demo中，绑定事件使用return false不可以阻止默认事件。

当然，如果你写在元素的内联事件如onclick中的return false还是可以阻止默认的。

哦，那么这些测试是毫无价值的么，显然不是，上面这段测试，显示了如果使用良性的html/css/js三层分离的注册事件来驱动页面，

那么使用a作为事件驱动的元素，务必加上event.preventDefault();

到这里该谈的基本都谈完了，那么我们来谈谈具体的事情吧。

上面的A~G几种形式的写法，各有利弊，在不同的环境或许都是最有解。

我们先谈谈好处：

第一种：直接调用页面中的全局函数，简单粗暴，无论什么时候都不会修改url，发生上面例子中的url改变的事情发生。

第二种：调用一个noop函数，即空函数，类似写法还有void(’0′);可参考o‘reilly ajax hacks那本书，由于没有写死调用的函数，我们可以通过绑定事件把动作附加到元素上，也不会发生上面改变url的事情发生。

第三种：兼容第二种的好处之上，防止写码的时候忽略了preventDefault的处理。

第四种：传统的简单粗暴写法/

第五种：使用锚点+绑定事件的方法来进行动作附加，即使js脚本没有下载完毕，也不会发生报错，而且符合三层分离的原则。而且锚点也可以表现语义化动作。

第六种：某大牛发现了 “空路径对页面性能影响的解决方案”，有兴趣可以搜索并测试，如果你测试了，不妨告诉我，谢谢。（不确定会对a的href也产生影响）

第七种：完全的无额外内容。

然后世界开始分裂，我要开始吐槽了：

第一种：直接调用伪协议的方式调用函数，现代浏览器中一致性很好，但是不确定在古老的浏览器中可以保持一致性。而且直接调用只能调用全局函数，不利于函数结构组织。

第二种：集成第一种的劣势。

第三种：集成第一种的劣势，且没有考虑三层分离。

第四种：且没有考虑三层分离。

第五种：如果脚本没用下载完毕，会修改url hash，如果协同写码，别人使用到url操作，且没有做去除hash处理，几率发生问题，如之前的测试。

第六种：不论会不会产生页面性能积极影响，about:blank作为额外的无语义内容就是让人不爽的。

第七种：这货不是一个标准的a标签，还记得之前说要看RFC和W3C标准嘛？

可能有的童鞋懒的找，我把内容贴一下：

Non-empty URL potentially surrounded by spaces

A URL that is not the empty string, optionally with leading and/or trailing space characters.

Absolute URL potentially surrounded by spaces

A valid IRI as defined in [RFC 3987], optionally with leading and/or trailing space characters.

接着我们在来看一个小东西，事件绑定次数，即句柄数量：

第一种：0，环保

第二种: 1

第三种: 2 周全的代价

第四种: 1

第五种: 1

第六种: 1

第七种: 1

我发现我有话痨属性，多提一个事情吧：

淘宝首页使用javascript: 10处

淘宝首页使用#: 10处

Github内页首页使用javascript: 0处

Github内页首页使用#: 9处

360首页使用javascript: 0处

360首页使用#: 7处

腾讯首页使用javascript: 37处

腾讯首页使用#: 11处

新浪首页使用javascript: 26处

新浪首页使用#: 0处

其他的大家自己搜索的玩呗~~

现在都流行开放式结局，那么，文章就此EOF。

至于选择哪个方案，我觉得大家都心里有数了，欢迎讨论~

原文链接：http://soulteary.com/2013/01/11/let-talk-about-tag-a.html

分享到微信

  

推荐

喜欢

回应 推荐 喜欢

>
我来回应





soulteary (浙江杭州)
技术初心者，梦想家，@soulteary ##链接## - [博客](http://www.soultea...

soulteary的最新日记  · · · · · ·  ( 全部 )

更新Dash文档的小技巧

2月总结

异议

万年历源码细节

不可不信的缘分

推荐这篇日记的豆列  · · · · · ·  ( 全部 )

soulteary的日记