原生js获取兄弟节点的坑

229 阅读1分钟

原生js在获取兄弟节点时,我们会利用 elementNode.nextSibling,然而这里存在一个Bug,那就是Internet Explorer 会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozilla 不这么做。所以有可能我们获取到的可能是一个回车。

下面是解决方案:

for (let i = 0; i < menuTrigger.length; i++) {
    menuTrigger[i].onmouseenter = function(e) {
        let a = e.currentTarget;
        let brother = a.nextSibling;
        while (brother.nodeType === 3) {
            brother = brother.nextSibling;
        }
    }
    menuTrigger[i].onmouseleave = function() {

    }
}

通过判断获取到的节点的类型是否是空白文本节点,如果是的话就继续找下一个节点。