Gestire evento onmouseout

[annibal77]

Salve a tutti,

in questi giorni ho realizzato un piccolo script che mi genera un 'Drop Down Menu' tramite PHP.

lo script in base ai parametri sputa fuori questo:

attivazione menu (attiverà la visual. del menu)

<div class='dropDownMenu' id='dropDownMenu'>

<div>
<h3> titolo sezione </h3>
<ul>[*] sito da ragg. [*] sito da ragg. [*] sito da ragg. [/list]
</div>

</div>

fino a qui tutto OK.

Adesso bisogna gestire questo menu tramite JS ( dove non sono molto bravo ).

i compiti che dovrà svolgere JS saranno due:

1 ) al click del link 'openMenu' dovrà rendere visibile il link ( questo funziona )
2 ) Quando il mouse esce dal menu dovrà tornare invisibile.... qui non riesco a farlo funzionare ma capisco che perdo decisamente l'evento onmouseout appena collide con gli altri nodi.

ecco il codice JS:

FUNZIONE LANCIATA ON ONLOAD

function openCloseMenu()
{
var openMenu= document.getElementById("openMenu");
var dropDownMenu= document.getElementById("dropDownMenu");

dropDownMenu.style.display = "none";

openMenu.onclick = function()
{
dropDownMenu.style.display = "block";
return false;
}

dropDownMenu.onmouseout = function()
{
dropDownMenu.style.display = "none";
return false;
}
}

Potete aiutarmi a gestire bene il mouse onmouseout , anche riciclando il codice postato.
Grazie!

[alexforum]

ciao mi sono tovato nello stesso tuo problema, ho provato a fare un po di esperimenti:

risultato:
- clicco sul link e apre/chiudo il menu
- passando sul menu aperto, dovrebbe chiudersi quando il mouse esce dal div con id='menu' all' evento onmouseout, ma non funzia. Appena entro nel menu aperto si chiude subito

html:

	apri / chiudi
	<div id="menu">
		<ul id="lista">
			[*]link 1
			[*]link 2
			[*]link 3
			[*]link 4
			[*]link 5
			[*]link 7
		[/list]
	</div>

js:

	window.onload = function(){menuInit('menu','bott')}
	function menuInit(m,b){
		var stato = 'none';
		
		var menu = document.getElementById(m);
		menu.style.display = stato;
		
		// click bottone apre/chiude
		var bott =  document.getElementById(b);
		bott.onclick = function(){
			stato = (menu.style.display=='none' || menu.style.display == '')?'block':'none'; 
			menu.style.display = stato;
			if(stato == 'block'){
				menu.onmousemove = obj;
			}
			return false;
		}
		
		function obj(e){
			if(!e)e=window.event;
			var src=e.target?e.target:e.srcElement;
			var div = src.parentNode;
			
			div.onmouseout = function(){
				if(this.id == 'menu'){
					this.style.display = 'none';
				}
			}
		}	
		
	}

potreste postare un esempio semplice così che me lo posso studiare?

grazie

[Xinod]

sbagli confidando nel fatto che il parentNode sia sicuramente il div:
se velocemente salto sul link il parentNode e' li, se salto su un li e' l' ul

correttamente ti fai passare l' evento e da questo ricavi correttamente l' elemento scatenante,
ma devi risalire via padri (con un while(src=src.parentNode) ) ed evitare di chiudere se durante questa risalita src ha un id e questo e' "menu"

poi non mi e' chiaro perche' tirare in ballo il mousemove:
setta direttamente l' onmouseout sul div e fai come dicevo prima,
l' onmouseout sul div scatta comunque onmouseover su qualunque dei suoi figli, perche' di fatto esci dal div

buon proseguimento con la sperimentazione

[annibal77]

Ciao Ragazzi,

di pomeriggio ci riprovo anche utilizzando l'esperimento di alexforum con i consigli di Xinod e vi faccio sapere cosa esce fuori... a dopo e grazie per le risposte.

[alexforum]

ho riprovato con alcune modifiche suggerite da Xinod ma onmouseout scatta subito appena entro nel div con id 'menu':
ho usato onmouseout e il while

	window.onload = function(){menuInit('menu','bott')}
	function menuInit(m,b){
		var stato = 'none';
		
		var menu = document.getElementById(m);
		menu.style.display = stato;
		
		// click bottone apre/chiude
		var bott =  document.getElementById(b);
		bott.onclick = function(){
			stato = (menu.style.display=='none' || menu.style.display == '')?'block':'none'; 
			menu.style.display = stato;
			if(stato == 'block'){
				menu.onmouseout = obj;
			}
			return false;
		}
		
		function obj(e){
			if(!e)e=window.event;
			var src=e.target?e.target:e.srcElement;
			//alert(src + ',' + src.parentNode)
			while(src = src.parentNode) { 
				menu.style.display = 'none';
			}
				
		}
		
	}

[Xinod]

pero' manca questo

Originariamente inviato da Xinod
ed evitare di chiudere se durante questa risalita src ha un id e questo e' "menu"

il che e' anche impreciso: non serve verificare l' id perche' "menu" e' una variabile accessibile da quella funzione, quindi nel caso specifico basta verificare che src==menu

mentre come stai facendo tu, ad ogni passaggio lungo i padri (nel while), nascondi il div

quello che invece potresti fare e'

			var trovato=false;
			while(src = src.parentNode) {
				if(src==menu){trovato=true;}
			}
			if(!trovato)	menu.style.display = 'none';

l' altra imprecisione che francamente mi era sfuggita riguarda l' assegnazione di src:
se scrivi var src=e.target?e.target:e.srcElement;
in src c'e' sempre l' elemento da cui parte l' onmouseout, che sicuramente sara' in qualche modo contenuto nel div (sia esso un link, un li, l' ul o il div stesso),
quello che devi verificare e' il relatedTarget/toElement

			var src=e.relatedTarget?e.relatedTarget:e.toElement;

il perche' lo trovi perfettamente spiegato nell' elenco delle proprieta' dell' oggetto event
http://javascript.html.it/articoli/l...r-ed-esempi/2/
(la versione per IE e' alla pagina successiva)

Potrebbe esservi altro ma al momento dovresti riuscire ad avvicinarti di molto a quello che vuoi ottenere
ciao

[alexforum]

menu.onmouseout = obj;

function obj(e) {
			if(!e)e=window.event;
			var src=e.relatedTarget?e.relatedTarget:e.toElement;
			//alert(src + ',' + src.parentNode)
			var trovato=false;
			while(src = src.parentNode) {
				if(src==menu){trovato=true;}
			}
			if(!trovato){	menu.style.display = 'none';}
				
		}

con opera e firefox ok, ma IE mi da un problema:
quando passo su un link, appena esco dal link scatta onmouseout


grazie ancora per l 'aiuto

[Xinod]

infatti, dicevo che potrebbe esservi anche altro

quando fai questo controllo

			while(src = src.parentNode) {
				if(src==menu){trovato=true;}
			}

l' src valutato nell' if e' gia' il parentNode di src,
ma c'e' anche il caso in cui src sia gia' menu, quindi appare come se l' onmouseout sia diretto fuori dal div perche' "menu" e' gia' il target dell' onmouseout e ovviamente non puo' trovarsi trai padri

ti butto giu quello che intendo per capirne la logica, poi decidi tu come implementarlo meglio

		function obj(e){
			if(!e)e=window.event;
			var src=e.relatedTarget?e.relatedTarget:e.toElement;
			var trovato=(src==menu)?true:false;
			while(src = src.parentNode) {
				if(src==menu){trovato=true;}
			}
			if(!trovato)	menu.style.display = 'none';
				
		}

ciao

[alexforum]

var src=e.relatedTarget?e.relatedTarget:e.toElement;
while(src = src.parentNode){
  [ ... ]
}

non riesco a capire questo passaggio:

se posiziono il mouse sul link il valore di src(src=e.relatedTarget?e.relatedTarget:e.toElemen t dovrebbe essere un riferimento al li, quindi all' intreno del while che condizione deve verificarsi?

[Xinod]

la modifica del mio ultimo messaggio l' hai apportata?
e' sempre e solo IE (tra l' altro credo solo il 6) che da problemi?

hai aggiunto un po' di stili per renderti immediatamente conto di quale elemento e' interessato?
IE6 per esempio lascerebbe normalmente un gap tra li disposti verticalmente
per cui il problema di cui sopra si verifica molto piu' spesso,
ma finche' non vedi quello spazio vuoto neanche ci pensi

aggiungi nel documento un elemento di debug in cui vai a scrivere via innerHTML il tagName di src, cosi' da capire chi secondo il codice e' il destinatario dell' onmouseout

se ancora non risolvi posta tutto il documento, doctype compreso
e specifica browser e piattaforma con cui stai provando