Cita: cancelBubble, o lo mismo que stopPropagation en el modelo estandar, no funcionaría porque los antes mencionados son para controlar la propagación del evento por los elementos. no es lo mismo que controlar que elementos disparan el evento. si no se tiene buen conocimiento acerca del modelo de evento, este concepto podría ser complicado entenderlo.
Sí, bueno, tampoco es para tanto, por eso sugerí que le diera una mirada. Lo que me olvidé es que era propietario, y que cambió el "nombre" en el estándar.
Y es cierto, lo que
dunga007 quiere se parece a la propagación de un evento, pero no es. Además, la cadena se produce hacia afuera, y aquí hay que evitar que el menú se oculte al moverse hacia adentro.
La verdad es que si no le hubiese pifiado, ni volvía. Ya que estoy, pongo el ejemplo del otro método que propuse
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>.</title>
<script>
function ocultarMenu(T){
T.style.visibility = "hidden";
}
function muestraMenu(T){
document.getElementById('menu').style.visibility = 'visible';
}
function funcion(){
alert("Hola!");
}
</script>
<style type="text/css">
.opcion {background-color: lime; cursor: pointer;}
</style>
</head>
<body>
<h2>... </h2>
<div id="menu" onMouseOut="ocultarMenu(this)"
/*onMouseOver="muestraMenu(this)" */
style="position:absolute; background-color: yellow;
top: 14em; height: 7em;">
<div class="opcion" onmouseover="muestraMenu()" onclick="javascript:funcion();">Mi funcion</div>
<div class="opcion" onmouseover="muestraMenu()" onclick="javascript:funcion();">Mi funcion</div>
<div class="opcion" onmouseover="muestraMenu()" onclick="javascript:funcion();">Mi funcion</div>
<div class="opcion" onmouseover="muestraMenu()" onclick="javascript:funcion();">Mi funcion</div>
</div>
<button onclick = "muestraMenu()"> Mostrar</button>
<p>El área amarilla se toma como "fuera del <tt>div</tt>".
Esto se puede corregir agregando otro evento a cada
"opcion" o habilitando el <tt>onMouseOver="muestraMenu(this)"</tt>.
</body>
</html>
Y también uno de
cancelBubble, para que se entienda cómo se repite el evento "hacia arriba".
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script>
function saleSpan(){
window.event.cancelBubble = true; //false;
alert("sale de span")
}
function saleDiv(){
alert("sale de div");
}
</script>
<style type="text/css">
</style>
</head>
<BODY>
<div onmouseout="saleDiv()" style="height: 6em;
width: 12em; background: red;">
<span onmouseout="saleSpan()" style="background: lime;">
QWERTYUIOP</span>
</div>
<p>Los mensajes de alerta se cierran con la tecla [Esc]
para no cambiar la posición del puntero, y así probar la
secuencia de eventos.<br>
En la función <tt>saleSpan()</tt> se cambia entre
<tt>false</tt> y <tt>true</tt> para que el evento pase al
<tt>div</tt> o no. </p>
</body>
</html>
De última,
IExplorer lo resolvió con un evento propietario, pero no sé cuál es su equivalencia en otros navegadores.
Código:
<div onmouseleave ="
alert('Sale hacia afuera del div, no hacia adentro. (¿Se entiende?)')
" style="height: 6em; width: 12em; background: red;">
<span style="background: lime;">
QWERTYUIOP
</span>
</div>