关于mouseover和mouseout的子元素触发问题

先标记一下，回头补全。

这里要用到event对象的一个属性relatedTarget，这个属性就是用来判断mouseover和mouseout事件目标节点的相关节点的属性，是不是有点绕，简单的来说就是当触发mouseover事件时，relatedTarget属性代表的就是鼠标刚刚离开的那个节点，当触发 mouseout事件时它代表的是鼠标移向的那个对象。当然MSIE它又不支持这个属性了:-P，不过它有代替的属性，分别是fromElement和 toElement，是不是有点累赘，不过我忍了，通过字面的意思大家应该很清楚这两个属性的意义，这里就不多解释，要是不清楚大家可以到网上搜一下相关的资料。

  function contains(parentNode,childNode){  
   return parentNode.contains ? parentNode != childNode && parentNode.contains(childNode) : !!(parentNode.compareDocumentPosition(childNode) & 16);  
   }  

关于那个16：
先看这里：http://blog.csdn.net/huajian2008/archive/2009/03/05/3960343.aspx

引用

在判断一个节点是否是另一个节点的祖先时
发现有compareDocumentPosition这么个函数
程序里的写法是:return !!(p.compareDocumentPosition(c) & 16);
开始对为什么要&上个16感到奇怪
因为以前没有用过compareDocumentPosition
所以也不知道它返回的值是什么
经过查询资料
以及测试
总结了下compareDocumentPosition返回值的结果
这个方法是用来判断一个节点是另一个节点的后代(10-01010)还是祖先(20-),在前面(4-00100)还是后面(2-0),同一节点为0(00000)
五位的二进制的各个位置表示不同的值:
第五位:祖先
第四位:后代
第三位:前面
第二位:后面
第一位:本身
相匹配的值为1,反之为0
这样对应五种情况,值分别是:10100(20), 01010(10), 00100(4), 00010(2), 00000(0)
即然知道了这些值
前面为什么要&上16
就一目了然了
只有第五位为1的时候,才会返回True,证明一个节点是另一个节点的祖先.
另外提一点,这个函数在IE中不支持,但文档上却写在在FF中原本为4的结果,在IE中为2,没看明白是怎么回事.

最后代码：

$e('.popbox').each(function (el){
    addEvent(el,'mouseout',function(evt,el){
//        console.log($q.event.getTarget(evt)==el,'$q.event.getTarget(evt)==el');
//        console.log(evt,'evt');
//        console.log(el,'el');
//        console.log($q.event.getTarget(evt),'$q.event.getTarget(evt)');
//        var tx =  evt.target || evt.srcElement;
//        console.log(tx,'tx');
        var reltg = (evt.relatedTarget) ? evt.relatedTarget : evt.toElement;
//        console.log(reltg,'reltg');
        
        var _ic = el.contains ? el != reltg && el.contains(reltg) : !!(el.compareDocumentPosition(reltg) & 16); 
//        console.log(_ic,'_ic');
        
        if(!_ic){
            $e(el).hide();
        }
    },[el]);
});

应用：http://act.vip.qq.com/privilege/templates/201002/