@furoya;
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.
@dunga007;
¿no te has parado a pensar que hubiera sido más fácil si desde un principio mostraras el código javascript que te causa problema? el problema no es tan trivial. si recien te inicias en el tema de los eventos, es comprehensible que te encuentres con
situaciones raras. te invito a que leas un buen material acerca de los
eventos para que puedas comprender como es que realmente funciona. los conceptos principales que debes adquirir son:
- que son los listener
- que es el objeto event
- como viaja el objeto event por los elementos
tu problema debe venir por las propiedades que estas utilizando para identificar el elemento a tratar. dicha propiedad va cambiando de valor a la vez que su contenedor (objeto event) se genera en distintos eventos. por otro lado, los eventos del raton (especialmente mouseover y mouseout) se disparan uno detrás del otro. cuando ocurre mouseout le sigue mouseover en un nuevo elemento, independientemente si estos estan anidados.
el siguiente código es una reproducción básica donde cada vez que suceden los eventos se crea un registro temporal de cual elemento inicio el evento y cual tipo de evento generó. notese el efecto bizarro que tiene en firefox. en iexplorer8 y anteriores no va funcionar porque dicho navegador utiliza una interfaz distinta al estandar. la porcion en color rojo es el código
"ofensivo". luego cambielo por
this. y finalmente, sería más cómodo si lo hicieras completamente en CSS, pero ya ese tema no va aquí. en el foro de css encuentras multitud de temas relacionado a este efecto.
Código:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<!-- saved from url=(0014)about:internet -->
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
function profileEvent(event){
var ul = document.body.lastChild, li = ul.insertBefore(document.createElement("li"), ul.firstChild);
li.appendChild(document.createTextNode(event.target.nodeName +": "+ event.type));
setTimeout(function(){li.parentNode.removeChild(li);}, 2000);
}
self.onload = function(){
document.body.firstChild.onmouseover = function(event){
event.target.firstChild.style.display = 'block';
profileEvent(event);
}
document.body.firstChild.onmouseout = function(event){
event.target.firstChild.style.display = '';
profileEvent(event);
}
}
</script>
<style type='text/css'>
div{
background-color:hsla(0, 100%, 50%, .2);
padding:1em;
width:10em;
} div > ul{
background-color:rgba(128,128,255,.2);
display:none;
margin:0;
padding:0;
} li{
background-color:rgba(255,255,0,.2);
list-style:none;
margin:1em;
padding:.25em;
border-radius:.25em;
} div + ul{
display:block;
position:absolute;
top:0;
left:14em;
} div + ul li{
margin:.25em;
padding:.25em;
}
</style>
</head>
<body><div><ul><li>list 1</li>
<li>list 2</li>
<li>list 3</li></ul>
container & event</div>
<ul></ul></body></html>