title: Tree with JavaScript not working properly on Internet Explorer 7
body: <p>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.</p>
  
  <hr>
  
  <pre><code> 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" &amp;&amp; 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" &amp;&amp; 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));}
  }
  </code></pre>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/Ek2xS/105/" rel="nofollow">FIDDLE</a></p>