Question

我需要一些JavaScript帮助，因为我在Internet Explorer 7上测试时表现很奇怪，但它在Internet Explorer 8，Google Chrome和Firefox上运行良好。问题是，当我点击P1，P2，大提琴，C2，C1的最左边的绿色阴影区域时，我的树倒回到物品，这不应该发生。它应该有点像，如果我点击parker或单元格或项目，它的子部分将被关闭或打开。

 var Objectkeys = function(obj){
        a = []
        for(var prop in obj){
            if (obj.hasOwnProperty(prop)) {
             a.push(prop);
            }
        };
        return a;
    },
    traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li,span;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.style.backgroundColor = "green";
            li.onclick = function(e) {
                e = e || window.event;
                if ((e.target || e.srcElement).tagName !== "LI") return;
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
                } else {
                    this.className = this.className.replace("hidden", "");
                }
                if (!e)
                    e = window.event;
                    if (e.stopPropagation) {
                      e.stopPropagation();
                    }
                else {
                    e.cancelBubble = true;
                }
            }
            if (typeof obj[prop] == "object" && Objectkeys(obj[prop]).length) {

                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    },
    sortedObject = function (obj) {
        document.getElementById("dvList2").innerHTML = "";
        var ul = document.createElement("ul"),
            li,keys = Objectkeys(obj).sort();
        for (prop in keys) {
        var li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            li.onclick = function(e) {
                e = e || window.event;
                if ((e.target || e.srcElement).tagName !== "LI") return;
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
                } else {
                    this.className = this.className.replace("hidden", "");
                }
                if (!e)
                    e = window.event;
                    if (e.stopPropagation) {
                      e.stopPropagation();
                    }
                else {
                    e.cancelBubble = true;
                }
            }
            if (typeof obj[keys[prop]] == "object" && Objectkeys(obj[keys[prop]]).length) {
                li.appendChild(sortedObject(obj[keys[prop]]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };
window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));
    document.getElementById("hlGSL").onclick = function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource));}
}

FIDDLE

Answer 1

您的JavaScript工作正常，即使在IE7中（在IE11中使用仿真模式进行测试）。

您看到的不同行为是因为IE7及以下版本使用margin缩进ul元素，而所有其他浏览器都使用padding。添加以下CSS以规范化：

ul {
    margin: 0;
    padding: 0 0 0 40px;
}

您可以使用DOM Explorer的元素选择工具（点击 F12 打开）来查看您实际点击的元素，以便更快地解决此类问题。

使用JavaScript的树在Internet Explorer 7上无法正常工作

1 个答案: