Вложенный список

[JsLoveR]

Делаю бесконечную вложенность списка. При клике на li в нём создаётся новый список, в новом списке при клике на li опять создаётся новый список и так до бесконечности. Но, к сожалению, возникают баги, когда вложенность списка 3-го уровня и больше. Создаются лишние списки или создаются не в том элементе, где кликнуто и тд.
Сам скрипт:

function createElementsIn(parent, number) {
			
				var ul = document.createElement("ul");
			
				for(var i = 0; i < number; i++) {
			
						var li = document.createElement("li");
						
						li.innerHTML = i + 1;
						
						li.onmousedown = function(element) {
						
								return function() {
										
										createElementsIn(element, 3);
																
								}
												
						}(li);
			
						ul.appendChild(li);
				}
			
				parent.appendChild(ul);
		}
		
		window.onload = function() {
				
				createElementsIn(document.body, 3);
				
		}

В чём дело?

[mta88]

конечно создаются лишние элементы, ведь событие поднимается по иерархии и запускает обработчики событий родителей
можно его остановить с помощью stopPropagation например

li.onmousedown = function(element) {
  return function(e) {
    e.stopPropagation();
    createElementsIn(element, 3);     
  }
}(li);

[JsLoveR]

mta88, спасибо. Почитал об этом тут