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

Question

I need some help with my JavaScript, as it behaves strangely while I am testing on Internet Explorer 7, but it works fine on Internet Explorer 8,Google Chrome,and firefox. the problem is that when ever i click on the extreme left of P1, P2, Cello, C2, C1 withen the green shaded region, my tree collapse back to Item which should not happen. It should be somewhat like that if i click on parker or cell or item, its sub-parts will be closed or open.

---

 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

Your JavaScript works fine, even in IE7 (tested using emulation mode in IE11).

The different behaviour you're seeing is because IE7 and below use margin to indent ul elements while all other browsers use padding . Add following CSS to normalize that:

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

You can use the DOM Explorer's element selection tool (hit F12 to open) to see what element you're actually clicking on in order to fix such issues much faster.