需要帮助来替换cancelBubble javascript

Question

我的Javascript需要一些帮助，问题是我的JavaScript代码在Internet Explorer 8以及Internet Explorer 7上无法正常运行，它在Chrome上运行正常。提出错误说：

“无法设置未定义或空引用的属性'cancelBubble' 文件：treelist.js，行：24，列：5“。

FIDDLE

var dataSource = ({
    "Pen": ({
        "Cello": ({
            "C2": ({}),
            "C1": ({})
        }),
            "Parker": ({
            "P2": ({}),
            "P1": ({})
        })
    })
});
 var traverseObject = function (obj) {
        var ul = document.createElement("ul"),
            li;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
                } else {
                    this.className = this.className.replace("hidden", "");
                }
                e.cancelBubble = true;
      //        e.stopPropagation();
            }

            if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
                console.log(Object.keys(obj[prop]).length + "  " + Object.keys(obj[prop]));
                li.appendChild(traverseObject(obj[prop]));
            } else {
                li.className += "leaf";
            }
            ul.appendChild(li);
            console.log(ul);
        }
        return ul;
    };


window.onload = function () {
    document.getElementById("dvList1").appendChild(traverseObject(dataSource));

}

---

谢谢

Answer 1

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;

        for (var prop in obj) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(prop));
            li.onclick = function(e) {
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
                } else {
                    this.className = this.className.replace("hidden", "");
                }
                var e = window.event;
                e.cancelBubble = true;
    //          if (e.stopPropagation) e.stopPropagation();
            }
            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;
        var keys = Objectkeys(obj).sort();
        for (prop in keys) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(keys[prop]));
            li.onclick = function(e) {
                var classNames = this.className;
                if (classNames.indexOf("hidden") == -1) {
                    this.className += "hidden";
                } else {
                    this.className = this.className.replace("hidden", "");
                }
                var e = window.event;
                e.cancelBubble = true;
    //          if (e.stopPropagation) e.stopPropagation();
            }

            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));}
//  document.getElementById("hlGSL").addEventListener("click",function(){document.getElementById("dvList2").appendChild(sortedObject(dataSource))},false);

}