2007年2月9日

令人费解 [a href="javascript:void(0)"] 问题

当我们做一个复杂的HTML和脚本应用的时候,在表现一个链接但又要执行一段javascript代码的时候,大多我们这样做

<href="javascript:void(0)" onclick="click_handle()">链接1</a>
<href="javascript:click_handle()" >链接2</a>
<href="javascript:void(click_handle())" >链接3</a>
这样做的好处是可以使用链接的css自带样式并且使HTML代码看起来更规范。使用void可以防止函数返回值影响链接地址,看来这个方案是“无懈可击”了,因为大家也都是这样做的。 但是今天我碰到了一种情况让人十分困惑,在IE6中如果你的页面有一个Window Media Player控件,并且同时使用上面的方案时,你会发现但点击过链接后会导致正在播放/暂停的文件变成了“停止”状态。当我发现这个问题的原因是因为链接上有javascript:字样而导致的时候真是十分狼狈了,因为我的树型控件,日期控件,下拉控件都使用了上面的方案。 但问题出现了,就要解决它,我最先想到的是,用无址链接#代替javascript:
<href="#" onclick="click_handle()">链接1</a>
但随后我发现URL后始终跟着一个#,我们知道#NO是代表页面的一个书签,在如今ajax的时代它更是被“利用”上了,尽管我对这种使用方式的使用是否合理表示怀疑,因为它似乎破坏了HTML的本身的结构,但毕竟如今许多主流AJAX框架运用了这种方式。所以就要去掉它以保护我们的URL:
<href="#" onclick="click_handle();event.cancelBubble = true;return false;">链接1</a>
这样就可以防止URL上出现#,当然你也可以这样声明一个方法
<href="#" onclick="return click_handle();">链接1</a>
function click_handle (e) {
  
  
//end of the method
  if (!e) {
    e
=window.event;
  } 
  event.cancelBubble 
= true;
  
return false;
}
至此问题似乎解决了,不过增加了代码量,此方案也值得考究。如果我发现新的方案,会及时给出。

2 条评论:

匿名 说...

这个问题。。。。

匿名 说...

[url=http://loans.legitpaydayloansonline1.com/]Payday loans online[/url] Stype Payday loans online Flallododebag http://loans.legitpaydayloansonline1.com/ Fundpopog This situation gets tougher if they find insufficient best tool when can even improve their credit ratings!!Payday loans contain very high interest rates and to pay it to online this a asset about the company, you cash loans!With aid of no fax payday loans, one installments, more taken foreclosure, a good sum of loan to the needy.