Как прописать функцию onmouseout для меню?

Question

[Алиса]

Есть меню на js но когда убираешь мышку субменю не скрывается. как добавить? я в js мало что понимаю, очень прошу вашей помощи.

Код

function wsp_menu(elementid, menuidsuffix, panepadding)
{
	this.menuElementSubMenuParent = document.getElementById(elementid);
	this.menuElementEntryHolder = null;
	
	if (this.menuElementSubMenuParent)
	{
		var divs = this.menuElementSubMenuParent.getElementsByTagName('div');
		if (divs.length)
			this.menuElementEntryHolder = divs[0];		
	}
	
	this.rootMenuElements = new Array();
	this.menuPanes = new Array();
	this.menuidsuffix = menuidsuffix;
	this.panepadding = panepadding;
	this.initialClientHeight = 0;
	this.currentlyVisibleMenuPane = null;
	this.useclickmode = true; // support for clicking on menu items, for touch screen devices
	WspMenusLastTimeClicked = 0;  // global if using more than one menu
	this.LastOpenedSubMenu = null;
	
	try {
		if (wsp_allmenus == null)
			wsp_allmenus = new Array();
	} catch(e)
	{
		wsp_allmenus = new Array();
	}
	
	wsp_allmenus.push(this);
	
	var me = this;
	document.onclick = function() { me.clickedOutside(); };

	if (this.menuElementSubMenuParent != null)
		this.menuElementSubMenuParent.style.overflow = "visible";

	if (this.menuElementEntryHolder != null)
		this.menuElementEntryHolder.style.overflow = "hidden";
	
	
	this.createMenuForItem = function(menuelementid, elementData)
	{
		var e = document.getElementById(menuelementid);
		if (e == null)
			return;
			
		this.rootMenuElements.push(e);
		var menupane = this.createMenuElements(e, elementData, false);
		this.menuPanes.push(menupane);
		
		var me = this;
		if (this.useclickmode)
			e.onclick = function(e)  { me.onMenuitemHovered(this); };

		e.onmouseover = function(e) { me.onMenuitemHovered(this); };
	}
	
	
	this.createMenuElements = function(htmlelement, elementData, issubmenu)
	{
		if (htmlelement == null)
			return;
			
		if (elementData == null || elementData.length == 0)
			return;
			
		var me = this;
		var menupane = document.createElement("div");
		
		menupane.style.position = "absolute";		
		menupane.style.left = (htmlelement.offsetLeft) + "px";
		menupane.style.top = (htmlelement.clientHeight + this.panepadding) + "px";
		menupane.style.overflow = "visible";
		menupane.style.zIndex = 10;
		menupane.id = this.menuidsuffix + "_pane";	
		menupane.creationParentMenuElement = htmlelement;
		
		this.menuElementSubMenuParent.appendChild(menupane);	
		
		menupane.subMenus = new Array();
		
		var maxWidth = 0;
		var maxHeight = 0;
		
		var aentries = new Array();
		
		var submenusExist = false;
		
		for (var i=0; i<elementData.length; i+=3)
		{			
			var elementContent = elementData[i+1];
			var elementTarget  = elementData[i+2];
			
			// test width of text
			var testElement = document.createElement("span");
			var textToMeasure = elementData[i];
			
			if (elementContent instanceof Array )
			{
				// has a sub menu
				
				// for elements with submenu and sub menu indicator, only measure the inner text,
				// which is the second appearing span				
				
				var beginText = textToMeasure.indexOf('<span', textToMeasure.indexOf('<span')+1);
				var endText = textToMeasure.indexOf('</span><span style="display:inline-block;', beginText);
				
				textToMeasure = textToMeasure.substring(beginText, endText);
			}
			
			testElement.innerHTML = textToMeasure;
			this.menuElementEntryHolder.appendChild(testElement);
						
			var width = testElement.offsetWidth;
			var height = testElement.offsetHeight;
			this.menuElementEntryHolder.removeChild(testElement);
			
			// now create real element		
			var aentry = document.createElement("a");			
			var menuentry = document.createElement("div");
			
			var txt = null;
			
			if (elementData[i] != '-')
				//txt = document.createTextNode(elementData[i]);
				menuentry.innerHTML = elementData[i];
			else
			{
				txt = document.createElement('hr');
				txt.id = this.menuidsuffix + "_hr";
			}
			
			aentry.appendChild(menuentry);
			if (txt != null)
				menuentry.appendChild(txt);
			menupane.appendChild(aentry);
						
			if (elementContent instanceof Array )
			{
				// sub menu
				var submenu = this.createMenuElements(menupane, elementContent, true);
				menupane.subMenus.push(submenu);
							
				if (this.useclickmode)
					//menuentry.onclick = function(e) { me.onSubMenuEntryHovered(submenu); };
					menuentry.onclick = function(me, submenu) { return function() { me.onSubMenuEntryHovered(submenu); } }(me, submenu);

				//menuentry.onmouseover = function(e) { me.onSubMenuEntryHovered(submenu); };
				menuentry.onmouseover = function(me, submenu) { return function() { me.onSubMenuEntryHovered(submenu); } }(me, submenu);
				
				submenusExist = true;
			}
			else
			{
				// normal link
				aentry.href = elementContent;
				
				if (elementTarget != null && elementTarget != '')
					aentry.setAttribute('target', elementTarget);
			}
			
			menuentry.id = this.menuidsuffix + "_entry";
			aentries.push(menuentry);
					
			maxWidth = Math.max(maxWidth, width);
			maxHeight += height; //txt.clientHeight;
		}
		
		if (submenusExist)
			maxWidth += 20; // add space for the arrow right symbol for submenus
		
		for (var j=0; j<aentries.length; ++j)
			aentries[j].style.width = maxWidth + "px";
			
		for (var j=0; j<menupane.subMenus.length; ++j)
			menupane.subMenus[j].style.left = (htmlelement.offsetLeft + maxWidth + panepadding*2) + "px";
		
		maxWidth += panepadding*2;
		menupane.style.width = maxWidth + "px";
		menupane.style.display = 'none';
				
		return menupane;
	}
	
	this.closeAllMenus = function()
	{
		for (var i=0; i<wsp_allmenus.length; ++i)
		{
			var m = wsp_allmenus[i];
			m.showMenuPaneWithIndex(-1);
			
			// also close sub menus
			m.closeOpenSubMenu();
		}		
	}
	
	this.closeOpenSubMenu = function()
	{
		if (this.LastOpenedSubMenu != null)
		{
			this.LastOpenedSubMenu.style.display = 'none';
			this.LastOpenedSubMenu = null;
		}
	}
	
	this.showMenuPaneWithIndex = function(i)
	{
		if (this.currentlyVisibleMenuPane)
			this.currentlyVisibleMenuPane.style.display = 'none';
				
		var newpane = null;
		if (i >= 0 && i < this.menuPanes.length)
			newpane = this.menuPanes[i];
		
		this.currentlyVisibleMenuPane = newpane;
		
		if (newpane)
		{
			newpane.style.display = 'block';
			
			// also, update position
			var htmlelement = newpane.creationParentMenuElement;
			newpane.style.left = (htmlelement.offsetLeft) + "px";
			newpane.style.top = (htmlelement.clientHeight) + "px";
		}
	}
	
	// main menu item hovered
	this.onMenuitemHovered = function(itemHovered)
	{
		if ( this.useclickmode )
			WspMenusLastTimeClicked = this.getTimeMs();
			
		// check if a root menu item has been hovered. If so, show its menu
		for (var i=0; i<this.rootMenuElements.length; ++i)
		{
			if (itemHovered === this.rootMenuElements[i])
			{
				this.closeAllMenus();
				this.showMenuPaneWithIndex(i);
				break;
			}
		}
	}
	
	// menu entry hovered, probably show sub menu
	this.onSubMenuEntryHovered = function(submenu)
	{
		this.closeOpenSubMenu();
		
		submenu.style.display = 'block';
		this.LastOpenedSubMenu = submenu;
		
		if ( this.useclickmode )
			WspMenusLastTimeClicked = this.getTimeMs();
	}
	
	
	this.clickedOutside = function()
	{
		if (this.useclickmode && ((this.getTimeMs() - WspMenusLastTimeClicked)< 250))
			return;
			
		this.closeAllMenus();
	}
	
	
	this.getTimeMs = function()
	{
		var d = new Date();
		return d.getTime();
	}
	
} // end function wsp_menu

Comments

[Kovalsky]

В 91ом году Терри Биссон опубликовал рассказ "They're Made Out of Meat", за что был номинирован на премию «Небьюла».

Учитывая авторскую пунктуацию и форматирование этот рассказ состоит из чуть более чем 4500 символов. Ваш же код насчитывает ~8000 символов. Ну серьезно, я сомневаюсь что кто-то возьмется искать там концы и писать за вас всё это. Ищете в этом коде нужный элемент подменю, вешаете на него обработчик события onmouseout который будет его закрывать.

[Алиса]

Kovalsky, Я так и думала но все таки решила попробовать написать вопрос. Я вот прям баран в js может по части кода хотя бы подсказочку

spoiler

// sub menu
				var submenu = this.createMenuElements(menupane, elementContent, true);
				menupane.subMenus.push(submenu);
							
				if (this.useclickmode)
					//menuentry.onclick = function(e) { me.onSubMenuEntryHovered(submenu); };
					menuentry.onclick = function(me, submenu) { return function() { me.onSubMenuEntryHovered(submenu); } }(me, submenu);

				//menuentry.onmouseover = function(e) { me.onSubMenuEntryHovered(submenu); };
				menuentry.onmouseover = function(me, submenu) { return function() { me.onSubMenuEntryHovered(submenu); } }(me, submenu);
				
				submenusExist = true;
			}

[Kovalsky]

Алиса, смотрите эту функцию:

this.closeAllMenus = function()
  {
    for (var i=0; i<wsp_allmenus.length; ++i)
    {
      var m = wsp_allmenus[i];
      m.showMenuPaneWithIndex(-1);
      
      // also close sub menus
      m.closeOpenSubMenu();
    }		
  }

В ней есть все что вам нужно - и закрытие всего и всех меню сразу (closeAllMenus), и закрытие только подменю у конкретного меню (m.closeOpenSubMenu). Какую-то из этих функций (в зависимости от того что конкретно нужно) выполняете при onmouseout/onmouseleave