Newsgroup: it.comp.lang.javascript
Titolo: table vs mouse

Ciao a tutti
E' qualche giorno che sto litigando con una table
a cui vorrei modificare delle proprietà a seconda dello stato del
mouse,
a tal fine ho scritto qualcosa del tipo
var tbl = document.createElement("table");
tbl.onmouseover=coloraBlu();
tbl.onmouseout=coloraGiallo();
i metodi colora...() vengono correttamente eseguiti,
ma il gestore degli eventi invoca l'onmouseout non solo quando
esco con il mouse dalla tabella ma anche quando passo sulla griglia
della tabella stessa.
Ho impostato il border della table a 0, rendendo praticamente
invisibile la griglia
ma niente da fare, lo sfarfallio dovuto al repentino cambio di colore
quando mi muovo
ormai all'interno della tabella continua a farmi la trifacciale.
Manco a dirlo i problemi li ho su Explore mentre su Firefox è tutto
ok.
Qualcuno può misericordiosamente aiutarmi per favore ?

 della tabella stessa.
cerca in rete cancelBubble (per IE) e stopPropagation() per gecko,
dovrebbero essere i metodi/proprietą che fanno per te.
-- 
"Affacciati affacciati benedici, guardaci
 guardaci...guardaci!
 Tanto sono quasi duemila anni che stai a guardare!"
									    E.B.

 dovrebbero essere i metodi/proprietà che fanno per te.
Ciao Cristiano e grazie per il consiglio :-)
Ho aggiunto
window.event.cancelBubble = true;
come prima istruzione dei metodi colora
e .....
tattaraaaaaaaatarataratatttataaaaaaaaa :
nulla da fare :-(
L'effetto trifacciale continua a dare un bel colorito alla mia
faccia :-)
Il problema del passaggio sulla griglia (anche dove border=0)
sta nel fatto che vengono lanciati sempre nuovi eventi di onMouseOver
onMouseOut
come se IE non riconoscesse nella griglia una parte della tabella
stessa.
Mi sta balenando in testa l'idea di utilizzare qualcosa che faccia da
GlassPane,
un componente invisibile da porre sopra alla tabella in modo tale da
mettermi in ascolto
degli eventi di quest'ultimo piuttosto che della controversa table, il
problema è che non
so come fare a sovrapporre un oggetto all'altro e far si che le sue
dimensioni
varino al variare di quelle dell'oggetto sottostante ...
ehmmm... che qualcuno sa come fare ?
:-)

 degli eventi di quest'ultimo piuttosto che della controversa table
E se invece infili la table in un contenitore e imposti gli handler sul
contenitore?
<div onmouseover=".." onmouseout=".."><table>...</table></div>
-- 
Nando [?]
Apostolo della Prova

 Qualcuno puň misericordiosamente aiutarmi per favore ?
Credo che questo possa aiutarti a capire meglio l'arcano:
 
http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow
-- 
~ "Non sono solitamente un uomo che prega,
ma se sei lassů, per favore salvami,Superman."
(Homer Simpsons)

        
http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow
Grazie, un pò di documentazione non fa mai male :-)

 <div onmouseover=".." onmouseout=".."><table>...</table></div>
Ahimè, non capisco perchè ma il problema persiste anche così ...
Ora ho provato a "passare al manuale", ovvero ho creato una table
statica
alla quale ho aggiunto i gestori degli eventi descritti e ...
cacchio!!! Il problema non c'è.
La cosa si verifica solo sulla table creata dinamicamente ...
Il mistero s'infittisce,
anche perchè analizzando la struttura della tabella dinamica
tramite il DOM Inspector di FireFox non vedo nulla di nulla che possa
creare questo problema.
Sigh! Sob! Me tapino !!!

 La cosa si verifica solo sulla table creata dinamicamente ...
Ma forse ho capito male io il problema. Avevo inteso che all'over tu
cambiassi colore, e all'out pure. E che questo passaggio ti causasse
sfarfallio. Questo è normale, dato il flusso degli eventi. Se hai:
	<div id="a" onmouseout="f()">
		<span id="b" >Bla bla bla</span>
	</div>
La funzione f viene invocata quando esci dal div "a"; che si traduce
ANCHE nell'ingresso nello span "b", benché sia suo figlio. Non solo,
gli eventi sono "ereditati" dai nodi figli, quindi quando esci dallo
span "b", viene nuovamente chiamata la funzione.
Aggiungi a quanto detto anche l'evento onmouseover e avrai il quadro
completo della tua situazione, e dello sfarfallio.
 
-- 
~ "Tutto quello che devi fare è chiamarmi;
sarò tutto quello di cui hai bisogno" (Peter Gabriel)

 span "b", viene nuovamente chiamata la funzione.
No aspetta, mi sa che mi sono spiegato male :
Il problema non si verifica al passaggio tra un child e il parent
e viceversa ma sul passaggio da un <td> all'altro.
Ed è qui che non mi torna :
Perchè se passo da un <td> all'altro della stessa tabella
in cui per entrambe ho innerHTML = "&nbsp;" e quindi nessuna
ulteriore nidificazione di componenti vengono lanciati dal gestore
degli eventi della <table> un mouseOut e immediatamente dopo
un mouseOver ?
Spostando il mouse di un pixel alla volta sulla linea di confine
non sono nemmeno riuscito a trovare un'area morta che allora
(anche tra mille rodimenti) mi farebbe accettare l'idea del lancio
degli eventi.
Quello che sono riuscito a trovare con questa "operazione"
è una fascia di UN pixel di spessore che sembra far dimenticare
per un momento alla <table> di essere di suo possesso facendole
lanciare il mouseOut, ma mamma <table> si fa fregare per pochissimo,
si accorge che il mouse è sul proprio territorio e lancia un
mouseOver.
Tutto questo si verifica solo su una tabella che creo dinamicamente
e perfettamente speculare a :
<table>
<tbody>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>BODY</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
</tbody>
</table>

Intanto grazie a quanti mi hanno risposto cercando di darmi una mano
in una situazione pressochè "anomala"
e poi :
RISOLTOOOOOOOOOOO :-)))))))))
Ho deciso di affidare tutto ad un bel Thread
che dopo 10 millisecondi dal mouseOut e/o dal mouseOver
va a vedere se effettivamente lo stato del mouse
rispetto al componente e lancia finalmente
le funzioni appropriate per l'evento.
Certo, la cosa non è proprio ortodossa ma funzica :-)
Ciao e grazie ancora.

 un mouseOver ?
Perché stai uscendo da un TD e entrando in un'altro. E gli eventi che
tu hai definito nella table vengono "sentiti" anche dai figli. Se fai
una rapida prova, te ne accorgerai subito che non è solo la "table" a
sentirli, appunto.
Ad esempio, partendo dal codice che hai scritto:
<script type="text/javascript">
	function log(evt){		
		var 	o = (evt.target||evt.srcElement),
			out = document.getElementById("out").firstChild;
		out.nodeValue+= evt.type+" on "+o.tagName+
				(typeof o.cellIndex=="number"?"("+o.cellIndex+")":"")+"\r\n";
	}
</script>
<body >
 <table onmouseover="log(event)" onmouseout="log(event)">
 <tbody>
 <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
   <td>&nbsp;</td>
   <td>BODY</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
 </tr>
 </tbody>
 </table>
<pre id="out"> </pre>
-- 
~ Se i sintomi persistono, insultare il medico.

 Certo, la cosa non è proprio ortodossa ma funzica :-)
Leggi l'altro post che ti ho appena scritto. :)


 tu hai definito nella table vengono "sentiti" anche dai figli.
Non metto in dubbio che gli eventi vengano intercettati anche dai
child del
componente di cui sono in ascolto, quello che mi spiace ma proprio non
riesco
a concepire è quanto ti dicevo nell'altra mail, ovvero :
una table non può perdere lo stato di mouseOver solo perchè sto
muovendo
il mouse al suo interno e tra un td e l'altro (finora FireFox mi ha
dato ragione
e del resto anche IE se utilizzo una tabella statica).
Ho osservato il log del tuo script :
mouseover on TABLE
mouseout on TABLE
mouseover on TD(1)
mouseout on TD(1)
mouseover on TABLE
mouseout on TABLE
mouseover on TD(0)
mouseout on TD(0)
mouseover on TABLE
mouseout on TABLE
mouseover on TD(1)
(Questo blocco non l'ho preso arbitrariamente, è tutto quello che esce
spostando il mouse dall'esterno al centro della table)
Le due ultime righe del log non sono concepibili
sono dentro al td della tabella ma fuori dalla tabella ???????
C'è qualcosa che non torna non credi ?
Del resto se quanto vedo corrispondesse alla realtà non si
spiegherebbe
nemmeno perchè affidando tutto ad un thre... (c'hai creduto è :-) ) ad
un
timeout io riesca ad eseguire tutto come previsto visto che l'ultimo
stato
del mouse rispetto alla table è un bel mouseOver.

 del mouse rispetto alla table è un bel mouseOver.
Dipende tutto dal codice che hai fatto, di modi per aggirare la cosa
ce ne sono; ma ciò non cambia certo il modo in cui vengono propagati
gli eventi. :)
-- 
~ La realtà è un'illusione causata dall'assenza di alcool.

 C'è qualcosa che non torna non credi ?
No, non hai colto il punto, credo. E siccome pure io ci capisco poco (come
ho dimostrato in questo stesso thread :-]) provo a spegare.
Quando muovi il mouse sulla tabella, si scatenano eventi mouseover-mouseout
sulle td, come è giusto che sia. Il punto è che tali eventi si propagano ai
genitori, quindi il padre "si accorge" degli eventi che accadono ai figli e
reagisce ad essi. Insomma, il fatto che venga avvertito un mouseout sulla
tabella non può essere interpretato come indicazione del fatto che si è
"usciti" dalla tabella, ma del fatto che si è "usciti" da un figlio della
tabella.
Mi sono spiegato "manco 'a chiavica", eh? :-D


 Mi sono spiegato "manco 'a chiavica", eh? :-D
Il modello mi è chiaro, è per questo che non riesco a capire lo
sfarfallio.
Comunque... probabilmente mi sto incaponendo su qualcosa che è
talmente evidente
che non riesco a vederlo solo per quanto ci ho spiaccicato il naso
sopra...
Quindi :
Io vado a finire il corso di cucina che avevo abbandonato per la
programmazione :-(
Ciao e grazie della pazienza e delle spiegazioni :-)
sia a te che a ZERO :-)

 sia a te che a ZERO :-)
Io non ho fatto niente, al limite ho detto cose sbagliate :)
