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

时间:2021-08-01 14:43:52

这两天做这个项目略有收获,记录如下:

1. 项目中有个bug,在IE7中登录成功时下拉菜单没有展开的情况下总有个残影在页面中,如下图所示:
浪首登录浮层增加收藏入口项目学到的几点知识-IE7 bug、relatedTarget、字符串换行
通过多种方法都没有解决,后来才知道原来是在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