href=”javascript:void(0);” considered harmful

今天看到一位Web开发者狂怒的通牒,特地写一篇日记来告诫自己usability和accessibility的重要性。

有时候使用<a>标记仅仅是用来挂载click事件,我们常常这样写:

  • <a href="javascript:void(0);" onclick="doSomething();">click</a>
  • <a href="javascript:void 0;" onclick="doSomething();">click</a>
  • <a href="javascript:;" onclick="doSomething();">click</a>
  • <a href="javascript:void doSomething();">click</a>

这些写法利用javascript“协议”和void运算符来告诉浏览器“这个链接哪里都不去”,从而取消<a>作为“超级链接”的作用。不过会带来一些问题,尤其是用于打开popup windows时:

  • 不能使用右键菜单中的open in new window
  • 不能把链接地址加入收藏夹
  • 状态栏会显示出最终用户搞不懂的“代码”,他们会认为“出错了”
  • 一旦脚本下载不完整或浏览器仅用了JavaScript,网页会非常sb

更为严重的是,在IE中会导致一些你永远也猜不出原因的古怪问题。例如IE6中,用这种方法挂载的事件处理函数中改变img的src属性,浏览器不会显示图片,必须在右键菜单中点show picture才能显示,我们在做计算机技能大赛投票页面时就遇到了这个问题,当时只好用setTimeout来work around。Brian也遇到过类似问题。

youngpup提出的打开popup window方案:

<a 
  href="http://google.com/" 
  onclick="window.open(this.href, 'popupwindow', 
  'width=400,height=300,scrollbars,resizable'); 
  return false;"
>Click...</a>
其中,return false起到的就是preventDefault和stopPropagation作用。对于一般情况:
<a 
  href="#user friendly description" 
  onclick="doSomething();return false;"
>Click...</a>
相关连接:
Advertisements
This entry was posted in Web. Bookmark the permalink.

7 Responses to href=”javascript:void(0);” considered harmful

  1. Unknown says:

    well-worded~~
             PN~:)

  2. Unknown says:

    wow gold!All wow gold US Server 24.99$/1000G on sell! Cheap wow gold,wow gold,wow gold,Buy Cheapest/Safe/Fast WoW US EU wow gold Power leveling wow gold from the time you wWorld of Warcraft gold ordered!

    wow power leveling wow power leveling power leveling wow power leveling wow powerleveling wow power levelingcheap wow power leveling wow power leveling buy wow power leveling wow power leveling buy power leveling wow power leveling cheap power leveling wow power leveling wow power leveling wow power leveling wow powerleveling wow power leveling power leveling wow power leveling wow powerleveling wow power leveling buy rolex cheap rolex wow gold wow gold wow gold wow gold -29733644610107

  3. Unknown says:

    wow gold!All wow gold US Server 24.99$/1000G on sell! Cheap wow gold,wow gold,wow gold,Buy Cheapest/Safe/Fast WoW US EU wow gold Power leveling wow gold from the time you wWorld of Warcraft gold ordered!

    wow power leveling wow power leveling power leveling wow power leveling wow powerleveling wow power levelingcheap wow power leveling wow power leveling buy wow power leveling wow power leveling buy power leveling wow power leveling cheap power leveling wow power leveling wow power leveling wow power leveling wow powerleveling wow power leveling power leveling wow power leveling wow powerleveling wow power leveling buy rolex cheap rolex wow gold wow gold wow gold wow gold -34693477109155

  4. Unknown says:

    wow gold!All wow gold US Server 24.99$/1000G on sell! Cheap wow gold,wow gold,wow gold,Buy Cheapest/Safe/Fast WoW US EU wow gold Power leveling wow gold from the time you wWorld of Warcraft gold ordered!

    wow power leveling wow power leveling power leveling wow power leveling wow powerleveling wow power levelingcheap wow power leveling wow power leveling buy wow power leveling wow power leveling buy power leveling wow power leveling cheap power leveling wow power leveling wow power leveling wow power leveling wow powerleveling wow power leveling power leveling wow power leveling wow powerleveling wow power leveling buy rolex cheap rolex wow gold wow gold wow gold wow gold -210133261442990

  5. Unknown says:

    welcome to the wow gold,wow gold,wow power leveling,world of warcraft gold,warcraft gold,world of warcraft gold,wow levelingcheapWoW Gold,WoW Gold,WoW Gold,WoW Gold,wow gold,buy WoW Gold,Cheap WoW Gold,Cheap WoW Gold,Cheap WoW Gold,Cheap WoW Gold,wow power level,wow power level,wow power level,Many World of Warcraft players try to play the game on their own before making the decision to buy wow gold.lotro gold,lotro gold,lotr gold,lotr gold,maplestory mesos,maplestory mesos,maplestory mesos,maplestory mesos, maple story mesos,maple story mesos,WoW gold isn’t found everywhere in the game;maple story mesos,maple story mesos,wow cd key,world of warcraft cd key,lineage2 cd key,warhammer online,war gold,baby boy clothing,baby girl clothes,baby girl clothing,dog clothes,dog collars,wedding dresses,evening dresses,cocktail dresses,world of warcraft power leveling,world of warcraft power leveling,power leveling wow,power leveling wow,power leveling wow,cheap wow power leveling,cheap wow power leveling,cheap wow power leveling,buy wow power leveling,buy wow power leveling,buy wow power leveling,power leveling,power leveling,power leveling,power level,power level,power level,wow power level,buy warhammer gold,buy warhammer gold,buy warhammer gold,warhammer gold,warhammer gold,warhammer gold,wow gold,wow gold,wow gold,wow gold

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s