浪首登录浮层增加收藏入口项目学到的几点知识-IE7 bug、relatedTarget、字符串换行

这两天做这个项目略有收获，记录如下：

1. 项目中有个bug，在IE7中登录成功时下拉菜单没有展开的情况下总有个残影在页面中，如下图所示：

通过多种方法都没有解决，后来才知道原来是在IE中display:none元素如果有父子关系，要先none里面的子元素，在none外边的父元素。

据说在显示的时候要相反先显示里面的子元素，再显示父元素，不过这次我没有碰到需要这样处理的问题，实在也懒的测试了，IE实在是太坑了，这个问题基本整了一天，谢谢栋栋同学帮忙解决这个问题。

 

2.在之前同事写的下拉菜单类代码中用到了一个方法，代码如下：

 var fixHover = function(elem, fn) {
         return function(e) {
             var target = elem;
             var relatedTarget = e.relatedTarget || e.fromElement;
             if( !relatedTarget || ( target !== relatedTarget &&
                 !contains(target, relatedTarget) ) ) {
                 fn.apply(target, arguments);
             }
         };
     };

（此代码在我电脑上的路径：D:\workspace\sso\v1\apps\user_panel\js\comp\dropmenu.js）

其中contains是一个STK的方法意思是后一个参数元素是否被前一个包含，这个不是重点，先不提。

fixHover这个方法是为了鼠标悬浮的元素中有子元素的话，虽然是在父元素上绑的事件，但当鼠标移动到子元素时事件方法又会执行一次，使性能降低，用了这个方法在绑定事件时代理下回调函数要好的多。

另外，以前见过relatedTarget这个事件参数属性，一直不太明白他和target事件参数属性的关系，今天查了下才知道，原来relatedTarget事件属性只在mouseover和mouseout事件中才有用，就是事件移动进去或出去之前那个元素的指针。具体参考地址：http://www.w3school.com.cn/jsref/event_relatedtarget.asp

 

3. 关于折行的字符串如何拼接，特别是当代码中出现html字符串时，必须要折行并缩进才能看的清楚，以前一直使用数组然后用join('')这种方法来拼接，这次发现了一个简单的方法，直接在换行时加个‘\’就可以拼接字符串了，不过这样缩进并不会被消除，但是在拼接html时应该问题不大，毕竟标签之间无论多少空格和缩进都会被浏览器解析为一个空格。

但是有同事说这种拼接的方法要比数组拼接性能低，还有待考证，有空时查查资料吧。

刚找到一篇介绍这个‘\’的文章：http://www.veryhuo.com/a/view/44795.html

他觉得使用这个在代码压缩时会有危险，但是我的代码压缩之后把那个‘\’去掉了，没有出问题。

 

时间: 2014-03-13 17:30:50