Utilizzo e.pageY per avere la posizione del mouse (solo in verticale).
Tutto bene.
Se pero' apro una select e faccio click su un'opzione, mi restituisce un valore sballato (inferiore di oltre 100 pixel !!!)
Andandoci sopra con il mouse (onmouseover), il valore e' corretto.
Facendo click (su una delle scelte della select), il valore e' SBALLATO.
Come mai ?
Allego codice di prova:
codice:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' >
<script type='text/Javascript' src='zprova.js'></script>
<link rel='stylesheet' type='text/css' href='zprova.css'>
</head>
<body>
<table class='prova' style='border='1px solid black;'
onmousemove="function m_pos(e) {document.prova.uno.value=e.pageY;}m_pos(event);"
onclick="function c_pos(e) {document.prova.due.value=e.pageY;}c_pos(event);">
<tr><td class='mappa'>
<div class='contenitore'>*MAPPA*
<form name='prova'>
posizione mouse [solo coord. Y]<input type='text' name='uno' value='' />
posizione mouse AL CLICK [solo coord. Y]<input type='text' name='due' value='' />
<div style='font-size:20px;'>
1) Schiacciando nel riquadro a lato "SOTTOMENU'", si apre un <div>.
2) La posizione del mouse (e anche quando si preme il pulsante) e' corretta.
3)Se si apre il select (il menu' a tendina), la posizione e' sempre corretta.
<span style='color:#800000;'>->Se si fa clicxk, la POSIZIONE SBALLA !!!</span>
</div>
</form>
</div>
</td>
<td class='laterale' rowspan='2'>
<div id='menu-2' name='menu-2' class='laterale' onclick="menu_apri(this,'menu-2','21px','',event);">
<div class='titolo'>SOTTOMENU'</div>
<div><ul>
<li class ='testo'>text : <li class='singolo'><input type='text' name='nome' value='' /><li class='fine'>
<li class='testo'>select : <li class='singolo'><select name='direzione'><option value='N8'>Nord</option><option value='N9'>Nord-Est</option><option value='N6'>Est</option><option value='N3'>Sud-Est</option><option value='N2'>Sud</option><option value='N1'>Sud-Ovest</option><option value='N4'>Ovest</option><option value='N7'>Nord-Ovest</option></select><li class='fine'>
[/list]</div>
</div>
</td></tr>
<tr><td class='legenda'>
<div class='contenitore'>*LEGENDA*</div>
</td></tr>
</table>
</body>
</html>
codice:
TABLE.prova {margin:0 auto; padding:0px 5px 0px 5px; width:763px; border:1px solid red; background-color:#A0A0A0;}
TABLE.prova TD {vertical-align:top;}
TABLE.prova TD.mappa {height:550px;}
/* ------------------------------------------------- */
div.laterale {margin:0 auto; margin-bottom:10px; text-align:left; font-size:10px; border:2px outset #B3A17D; color:black; width:192px; height:21px; overflow:hidden;}
DIV.laterale DIV.titolo {height:20px; font-size:15px; font-weight:bold; text-align:center; color:#600000; background-image:url('../immagini/sfondo_mappa_mari_select.jpg');}
DIV.laterale UL {list-style-type:none;margin:0px;padding-left:3px;}
DIV.laterale LI {margin-top:3px; height:15px; line-height:15px;}
DIV.laterale LI.testo {width:65px; float:left;}
DIV.laterale LI.singolo {width:105px; float:left;}
DIV.laterale DIV INPUT[TYPE="text"] {height:11px; width:100px; font-size:10px; border:1px solid black; background-color:transparent;}
DIV.laterale DIV select {text-align:center; height:15px; font-size:10px; width:90px; background-color:transparent; border:1px solid gray;}
DIV.laterale DIV INPUT:focus {border-color: red;}
DIV.laterale DIV INPUT:hover {border-color: red;}
DIV.laterale DIV select:focus {background-color:#B3A17D; border-color: red;}
DIV.laterale DIV select:hover {border-color: red;}
DIV.laterale DIV.termina {clear:both; height:5px; font-size:1px;
background-image:url('../immagini/sfondo_mappa_mari_select.jpg');}
codice:
// Apre le sottovoci dei menu' (principale e della mappa dei mari)
// FUNZIONAMENTO: sono div con height impostata a una certa altezza (inferiore
// di tutto il div):
// - per MOSTRARE mette l'altezza a 100%;
// - per NASCONDERE mette l'altezza alla misura inferiore
// impostata nel HTML;
function menu_apri(elemento,gruppo,dimensione,minimo,e) {
// elemento -> l'elemento del DOM su cui si e' premuto il mouse;
// gruppo -> il nome (anche l'id) dell'elemento (uguale per tutti gli elementi dello stesso menu');
// dimensione -> la dimensione a cui ridurre tutti gli elementi (per chiuderli);
// minimo -> la dimensione minima degli elemento da mostrare (serve per IE7 per il menu' spostamento nella mappa dei mari)
var x = 0;
if (elemento.style.height != "100%") {
/* riduce tutti i menu */
var dati = document.getElementsByName(gruppo);
for (x = 0; x < dati.length; x++) {
dati[x].style.height = dimensione;
dati[x].style.minHeight = dimensione;
}
/* mostra elementi del menu */
elemento.style.height="100%";
if (typeof(minimo) == "string") {elemento.style.minHeight = minimo;}
}else{
/* la proprieta "offsetY" NON puo' essere usata perche' da' il valore
dal bordo superiore dell'elemento su cui si e' verificato l'event
(e non dal div che ha richiamato questa funzione) */
/* POSIONE DEL DIV */
/* controlla se l'elemento e' dentro una tabella (-> calcolare la distanza della tabella dal bordo superiore) */
/* il menu' principale e' fuori dalla tabella */
/* i sottomenu' sono dentro una tabella */
var padre_td = elemento.offsetParent;
if (padre_td != "[object HTMLBodyElement]") {
var padre_table = padre_td.offsetParent;
var posizione_div = padre_table.offsetTop + padre_td.offsetTop + elemento.offsetTop;
}else{
var posizione_div = elemento.offsetTop;
}
/* POSIONE DEL MOUSE */
/* in IE7 non esiste l'elemento pageY -> allora bisogna sommare alcuni valori */
if (e.pageY) {
var posizione_mouse = e.pageY;
}else{
/* Per tutti i browser che non usano la proprietà "pageY" */
var posizione_mouse = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
/* ----- [QUESTI BROWSER NON CALCOLANO TUTTI I TAG CHIUSI CHE OCCUPANO SPAZIO
| SOPRA IL DIV] */
/* | */
/* | */ posizione_div = posizione_div + document.getElementById('schema_contenitore_due').offsetTop + document.getElementById('schema_colonna_centrale').offsetTop;
/* ----- [FINE] */
}
/* DIFFERENZA MOUSE - DIV */
var differenza = posizione_mouse - posizione_div;
// CONTROLLO: se e' stato premuto nella parte del titolo o nel corpo
if (differenza < parseInt(dimensione)) {
//alert("differenza ["+differenza+"] - div ["+posizione_div+"] - mouse ["+posizione_mouse+"]");
//alert("mouse ["+posizione_mouse+"] pageY ["+e.pageY+"] - mouse 2 ["+posizione_mouse_2+"]");
elemento.style.height = dimensione;
elemento.style.minHeight = dimensione;
}
}
}