给页面 unload 加上效果

此站：http://www.cbmland.com/ 的页面离开时的效果非常NB!佩服的很。

一开始，我以为是用事件 onunload,试了一把，跟本就没效果。因为，效果还不曾触发，页面以转走了。

后来分析了一下他的JS，发现是用 onclick 来完成的。

下面，我就来说说。

为什么不用 onunload ，我前面就说过了。而且，本司令以前做 跟踪 浏览者停留 在 某个页面 多长时间 的时候，就给上司提出过，用 onunload 完全不可行。

那么这个站的原理是什么呢？

用 onclick, document.documentElement.onclick

因为 点击一个链接，首先会触发一个 onclick 事件，这个事件会冒泡到document.documentElement, 在 documentElement 的 onclick 处理完后，那个 链接 才会接着处理。

很简单。为了达到这个目的，首先要过滤事件源，如果不是 <a>,就放弃，其次在判断这个 <a> 是不是一个锚点链接，是不是一个 javascript等。

看下面代码：

var collapseRightColumn = function(evt){
 evt = window.event || evt;
 var obj = evt.srcElement || evt.target;
 while(obj && obj.tagName != 'A'){
  obj = obj.parentNode;
 }
 if(obj == null || obj.tagName != 'A') return;
 
 if( 
  (obj.getAttribute('name') != '' && obj.getAttribute('name') != null) || 
  obj.getAttribute('href') == '' || 
  obj.getAttribute('href') == null || 
  /#/.test(obj.href) || 
  /^javascript/.test(obj.href) || 
  obj.onclick != undefined || 
  (obj.target != '' && obj.target != '_self' && obj.target != '_top' && obj.target != '_parent') 
 )
  return true;
 else{
  var a = function(){
   var rightColumn = JObj.$('rightColumn');
   var ani = JObj.UI.JAnimate.$(rightColumn);
   ani.runFromCurrent({left:document.documentElement.clientWidth,alpha:10});
  }
         //如果 availWidth 大于 1024 只收缩 rightColumn
  if(screen.availWidth > 1024)
   a();
  else{//否则,先隐藏 open 按 钮
   var ani = JObj.UI.JAnimate.$('open1024');
   ani.onComplete = a;
   ani.runFromCurrent({top:-60});
  }
 }
}
 
JObj.addEvent(document.documentElement,'onclick',collapseRightColumn);

 首先过滤事件源：
 

while(obj && obj.tagName != 'A'){
  obj = obj.parentNode;
 }
 if(obj == null || obj.tagName != 'A') return;

因为 a 里可以包括 <span><img>等标签。

二，放弃 是 锚点的，没有href属性的，href='javascript:xxx'的，target 是新页的。

if( 
  (obj.getAttribute('name') != '' && obj.getAttribute('name') != null) || 
  obj.getAttribute('href') == '' || 
  obj.getAttribute('href') == null || 
  /#/.test(obj.href) || 
  /^javascript/.test(obj.href) || 
  obj.onclick != undefined || 
  (obj.target != '' && obj.target != '_self' && obj.target != '_top' && obj.target != '_parent') 
 )

因为 IE和FF的 getAttribute 取一个不存在的属性时，返回的值不同，所以用了： (obj.getAttribute('name') != '' && obj.getAttribute('name') != null) 这样的写法。
3，运行效果。具体怎么实现，就看个人造化了。

另外，如果在这个 onclick 事件，如果return false ，在IE下，你点了链接，页面也是不会跳转的。其它浏览器没影响。http://my.dajiaozi.com 上，我以加了效果，分辨率 > 1024 和 <= 1024 我做了不同的处理，两种分辨率下的效果不同。