跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

2019-06-06 07:53:44王振洲

3.  4    (2进制:   000100)

4.  2    (2进制:   000010) 

5.  0    (2进制:   000000)

6.  2进100***的数...

那么这些 20 10 4 2 0 是怎么来的呢? 我们接着往下 看...

 

试试上 这个2进制算法 是专门用来解释 两个节点之间的关系的

 

这个 6位2进制数 才是根本所在

第6位 代表 两个节点是否一个在DOM树上一个不在 这个是针对整个DOM树而言的.也就是说 如果两个都不在 或两个都在 则为0 否则为1

第5位 代表node是否是node2的父节点 如果是 则为1 否则为0

第4位 代表node是否是node2的子节点 如果是则为1 否则为0

第3位 代表node是否在node2的前面 如果是 则为1 否则为0 (注:如果node是node2的父节则node同时也看做在node2的前面)

第2位 代表node是否在node2的后面 如果是 则为1 否则为0 (注如果node是node2的子节点 则node同时也看做在node2的后面)

最后 如果 2 3 4 5 6 位 都为0 即 000000 说明 两个节点 要么同时在DOM树上 要么同时不在. 且 两个节点 没有任何关系 那么只有一种可能 即两个节点是同一个节点...也就是 node==node2

 

所以 node.compareDocumentPosition(node2) &16 位运算 的结果是什么呢? 以上几种可能的组合中只有 010100 &010000 以及 110*** &16 的结果是 010000 即返回16 其他情况  均返回 0 然后 用!! 吧number隐式转型成boolean类型 我们就可以判断出 node是否是 node2的父节点了...

所以 我们也可以使用 node2.compareDocumentPosition(node) && 8 来判断node2 是不是 node的子节点 道理是同样的

或者我们也可以直接 node.compareDocumentPosition(node2) ==20 来做判断 这样还可以省略 !! 做转型..也是可以的.

 

到了这里 聪明你的 一定发现 这玩意是什么? 分明就是c#中  flag 标识枚举 的用法...

c# 中 File.Attributes 枚举 可能同时具备 n多属性 比如一个文件 可以是 只读的同时 还可以是 隐藏的 或者同时还可以是 共享的. 等等

那么 用一个枚举 值 如何确定 一个文件同时具备哪些属性 又不产生冲突呢? 答案 于 compareDocumentPosition是一样的...

 

我用js 实现了一个 类似逻辑 来管理 flag标识的类 来说明这个问题 代码如下

// flag 类
    function flag(sFlags) {
        this._flags = {};
        this._status = 0;
        sFlags && this.initFlags(sFlags);
    }
    flag.prototype = {
        constructor: flag,
        initFlags: function(sFlags) {//sFlags "状态1,状态2,状态3...... 初始化原始标识集合...